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「 最 新 」「 改 訂 版 」「 カ ラー 版 」「 第 4 版 」 と 
大 好評 の うち に 続い た ベス ト セ ラー の 改訂 版 で す 。 


InternetExplorer 6.0 & Netscape 6.2 の 
ブラ ウザ に 対応 し 、 

Web ベ ペー ジ 作 成 に 必須 な HTML タ グ の 

すべ て を 隅 か ら 隅 まで 解説 し ます 。 


付録 に は 、Web ベ ペー ジ の 色 に 迷っ た と き に 役立つ 
カラ ー チ ャ ー ト や 配色 サン プル を 収録 ! 
これ 1 冊 で タグ に つい て は 恐い も の ナシ ! 


ホー ムペ ー ジ 作成 に な く て は な ら な い バ イブ ル で す 。 


本 書 の サン プル ソー ス は すべ て 
Web ペ ベー ジ か ら ダ ウン ロー ド が 可能 で す 
さあ ! 今 す ぐ 自 分 の ペー ジ に 活か し まし ょ う !! 


http://www.shoeisha.com/book/pc/dic/ 





Internet EXplorer6.0 ag Hetscape6.2 
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本 書 内 容 に 関す る お 問合せ に つい て 


この た び は 翔 涼 社 の 書籍 を お 買い 上 げ い た だ き 、 誠 に あり が と う ご ぎ ざい ます 。 英 社 で は 、 読 者 の 皆様 か 
ら の お 問い 合わ せ に 適切 に 対応 させ て いた だ く た め 、 以 下 の ガ イド ライ ン へ の ご 協力 を お 願い し て お り ま 
す 。 下記 項目 を お 読み いた だ き 、 手 順に し た が っ て お 問い 合わ せく だ さい 。 


@ お 問い 合わ せ の 前 に 
角 社 Web サ イト の 「 正 誤 表 」 や 「 出 版 物 Q&LA] を ご 確認 くだ さい 。 こ れ ま で に 判明 し た 正誤 や 追加 情報 、 
過去 の お 問い 合わ せ へ の 回 答 (FAQ)、 的 確 な お 問い 合わ せ 方 法 な ど が 掲載 され て いま す 。 
正誤 表 http://www.seshop.com/book/errata/ 
出版 物 Q&A http://www.seshop.com/book/qa/ 


信 ご 質問 方 法 
多 社 Web サ イト の 書籍 専用 質問 フォ ー ム (http://www.seshop.com/book7qa/) を ご 利用 くだ さい 。 記載 
漏れ や 独自 の 用 紙 等 に よる ご 質問 、 お 電話 や 電子 メー ル に よる お 問合せ は 、 お 受け し て お り ま せん 。 


※ 質 問 専用 シー ト の お 取り 寄せ に つい て 

Web サ イト に アク セス する 手段 を お 持ち で な い 方 は 、 ご 氏名 、 ご 送付 先 (ご 住所 郵便 番号 電話 
番号 また は FAX 番号 電子 メー ル ア ド レス ) お よび 「 質 問 専用 シー ト 送 付 希 望 ] と 明記 の うえ 、 電 子 
メー ル (qaform@shoeisha.com) 、FAX、 郵 便 (80 円 切手 を ご 同封 願い ます ) の いずれ か に て "編集 部 
読者 サポ ー ト 係 " まで お 申し 込み くだ さい 。 お 中 し 込ま れ た 手段 に よっ て 、 折 り 返 し 質問 シー ト を お 
送り いた し ます 。 シ ー ト に 必要 事項 を 漏れ な く 記入 し 、“ 編 集 部 読者 サポ ー ト 係 " まで FAX また は 郵 
便 に て ご 返送 くだ さい 。 


念 ご 回 答 に つい て 
ご 回 答 は 、 ご 質問 いた だ いた 手段 に よっ て ご 返事 申し 上 げ ま す 。 ご 質問 の 内 容 に よっ て は 、 回 答 に 数 日 
な いし は それ 以上 の 期間 を 要する 場合 が あり ます 。 


⑯ ご 質問 に 際 し て の ご 注意 
本 書 の 対象 を 越え る も の 、 記 述 個所 を 特定 され な いも の 、 ま た 読者 固有 の 環境 に 起因 する ご 質問 等 に は 
お 答え で きま せん の で 、 予 め ご 了承 くだ さい 。 


郵便 物 送付 先 お よび FAX 番号 
送付 先住 所 〒160-0006 東京 都 新宿 区 舟町 5 
FAX 番号 03.5362-3818 
宛先 (株 ) 翔 泳 社 出版 局 編集 部 読者 サポ ー ト 係 


※ 本 書 に 記載 され た URL 等 は 予告 な く 変更 きれ る 場合 が あり ます 。 

※ 本 書 の 動作 環境 に 関す る 詳細 は x ペ ー ジ を ご 参照 くだ さい 。 

※ 本 書 の 出版 に あたっ て は 正確 な 記述 に つと め ま し た が 、 著 者 や 出版 社 な どの いずれ も 、 本 書 の 内 容 に 対 
し て な ん ら か の 保証 を する も の で は な く 、 内 容 や サン プル に 基づく いか な る 運用 結果 に 関し て も いっ さい 
の 資 任 を 負い ませ ん 。 

※ 本 書 に 掲載 きれ て いる サン プル プロ グラ ム や スク リプ ト 、 お よび 実行 結果 を 記し た 画面 イメ オー ジ な ど は 
特定 の 設定 に 基づい た 環境 に て 再現 きれ る 一 例 で す 。 


本 書 に 記載 し た 会 社名 、 ソ フト ウェ ア 名 、 ハ ー ド ウェ ア 名 は 各社 の 商標 お よび 登録 商標 で す 。 








お 問い 合わ せ .… 
本 書 の 読み 方 .… 
本 書 の 動作 環境 .… 


人 | リア ルコ ピン ル 4 


HTML の 基礎 


1 HTML4.01 
2 要素 ・ タ グ ・ 属 性 と 値 .. 

3 HTML に お ける 色 の 指定 .… 
4 HTML に お ける 長 さ の 指定 .… 
5 
6 

















絶対 URL と 相対 URL.… 
HTML ファ イル の 作り 方 .… 


HTML の バー ジョ ン を 指定 する .… 
文書 の 構造 を 定義 する .……… 
文書 に タイ トル を つけ た い .…… 
基準 と な る URL を 指定 し た い .. 
コメ ント を 入れ た い .……。…… 
問い 合わ せ 先 を 示し た い .… 
文書 情報 を 記述 し た い .… 
初期 情報 を 指定 し た い .… 
文書 を リロ ー ド させ た い .…………… 
10 自動 的 に ほか の ペー ジ に 移動 し た い . 09 
冊 区 午 問 直 の 開 係 を 示し 7 た UE 
12 特定 の 範囲 を 設定 し た い .… 


見 出し を 設定 し た い .……… 338 
段落 を 設定 し た い 
改行 させ た い .…… 
改行 させ な いで 表示 し た い 
入力 し た と お り に 表示 し た い 
長い 文章 を 引用 し た い .… 
短い 文章 を 引用 し た い .… 
情報 源 を 示し た い .… 
定義 語 を 示し た い . 
強調 し た い 
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11 上 付き 文字 ・ 下 付き 文字 を 指定 し た い 
12 技術 的 な 意味 を 示し た い 
13 略語 や 頭字 語 を 表し た い 
14 追加 され た 部 分 を 示し た い 
15 削除 され た 部 分 を 示し た い 
16 テキ スト に ルビ を ふり た い .… 

17 テキ スト を 点滅 させ た い .……… 
18 テキ スト の 表記 方 向 を 指定 し た い 
19 テキ スト を スク ロー ル さ せ た い .… 
20 テキ スト の スク ロー ル を 細か く 設 定 し た い … ん eee 71 


背景 色 を 指定 し た い . 
背景 に 画像 を 設定 し た い 
背景 画像 を 固定 し た い .… 
テキ スト の 色 を 指定 し た い 
テキ スト の 色 を 部 分 的 に 指定 し た い .. 
見 出し の 位置 を 指定 し た い .… 
段落 の 位置 を 指定 し た い .… 
まとめ て 位置 を 指定 し た い 
セン タリ ング し た い … 
10 横 箸 線 を 表示 し た い . 
11 横 肝 線 の 色 を 指定 し た い .… 
12 ペー ジ の マー ジン を 指定 し た い . 


1] フォ ント サイ ズ を 絶対 値 で 指定 し た い 
フォ ント サイ ズ を 相対 値 で 指定 し た い その 1 
フォ ント サイ ズ を 相対 値 で 指定 し た い その 2 
フォ ント の 種類 を 指定 し た い 
フォ ント スタ イル を 指定 し た い その 1 
フォ ント スタ イル を 指定 し た い その 2.… 
特殊 な 文字 を 表示 し た い .… 
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リス ト を 作り た い 
番号 付き リス ト を 作り た い 
リス ト の マー ク を 変更 し た い 
番号 付き リス ト の マー ク を 変更 し た い .… 
リス ト の 開始 番号 を 変更 し た い .… 
リス ト の 連 番 を 変更 し た い 
用 語 の 定義 を リス ト 表 示し た UL 


] 画像 を 表示 し た い …………………………… 
2 画像 の 代わ り の テキ スト を 指定 し た い .… 
3 画像 の サイ ズ を 指定 し た い 


っ いっ ひと の の ロー 





画像 の 枠 線 を 設定 し た い 
テキ スト の 並び 方 を 指定 し た い .… 
画像 に テキ スト を 回 り 込 ませ た い 
画像 に 対す る 回 り 込み を 解除 し た い 
画像 と テキ スト の 間隔 を 指定 し た い 
イメ ー ジ マッ プ を 作り た い 


1 リン ク を 設定 し た い 
2 場所 を 指定 し て リン ク し た い その 1 
3 場所 を 指定 し て リン ク し た い その 2 … 
4 新しい ウィ ンド ウ に リン ク 先 を 表示 し た い .… 
5 リン ク を 利用 し て メー ル を 送信 し た い 


入力 フォ ー ム を 作り た い 
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2 フォ ー ム を メー ル で 送信 し た い .… -.162 
3 送信 ボタ ン を 作り た い .…… .166 
4 リセ ッ ト ボ タン を 作り た い .. .168 
5 画像 を 送信 ボタ ン に し た い .… .170 
6 ボタ ン を 作り た い 

7 1 行 の テキ スト 入力 フィ ー ル ド を 作り た い 

8 複数 行 の テキ スト 入力 フィ ー ル ド を 作り た い .… 


























9 隠し フィ ー ル ド を 作り た い 
10 ラジ オ ボ タ ン を 作り た い 
11 チェ ッ ク ボ ックス を 作り た い .… 
12 ブル ダウ ン 形 式 の メニ ュー を 作り た い .. 
13 リス ト ボ ックス を 作り た い .. 
14 メニ ュー の 選択 肢 を グル ー プ 化し た い .. 
15 入力 項目 を グル ー プ 化し た い .… 
16 部 品 に ラベ ル を つけ た い .… 


5 っ (二村 作り SrfG95ERR は iLCKCRC 

2 テー ブル の 見 出し を つけ た い .… 

3 枠 線 の 幅 を 指定 し た い 

4 テキ スト に 対す る テー ブル の 位置 を 指定 し た い 

5 テー ブル に 対す る 回 り 込 み を 解除 し た い 

6 テー ブル と テキ スト の 間隔 を 指定 し た い .. 

7 テー ブル の サイ ズ を 指定 し た い .… 

8 セル の サイ ズ を 指定 し た い .… 
9 キャ プシ ョ ン を つけ た い .… 
10 セル 内 の テキ スト の 位置 を 指定 し た い .… 
11 セル の 間隔 や マー ジン を 指定 し た い 
12 枠 線 の 色 を 指定 し た い .…… 
13 外 枠 の 表示 方 法 を 指定 し た い . 
14 内 側 夏 線 の 表示 方 法 を 指定 し た い .… 


5 テー ジル の 背 県 色 を 指定 し た だ Ua 
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デー ブル の 痛 球 較 勿 を 指定 し た 5 は EE 
セル の 痛 景 画像 を 指定 し た い . 
セル 内 の 改行 を 禁止 し た い . 
縦 方 向 に セル を 連結 し た い 
横 方 向 に セル を 連結 し た い 
行 を グル ー プ 化し た い 
列 を グル ー プ 化し た い = 
2U ま めで 周 性 を 設定 じ た だ EE 242 




























1 フレ ー ム を 作り た い .… …244 
2 フレ ー ム に 表示 され る ファ イル を 指定 し た い .. .247 
3 境界 線 の 表示 ・ 非 表示 を 指定 し た い .. .250 
4 フレ ー ム の 境界 線 を 固定 し た い .…… .252 
5 境界 線 の 幅 を 指定 し た い .… 

6 境界 線 の 色 を 指定 し た い . 

7 フレ ー ム 枠 か ら の マー ジン を 指定 し た い . 

8 スク ロー ル バ ー の 表示 ・ 非 表示 を 指定 し た い .… 

9 リン ク を 読み 込む ウィ ンド ウ を 指定 し た い . 

10 フレ ー ム を 表示 し な い 環 境 に 対処 し た い 3 
ジラ ポジ シ ジ フウ ジー が お 作り た Usersdiaed 
その 他 

1 スタ イル シー ト を 使い た い . .272 
2 スク リプ ト を 使い た い .…… .274 
3 スク リブ ト が 実行 され な い 環 境 に 対処 し た い .… .276 
4 BGM を 只 ら し た い ………eeeeeee .278 
5 プラ グイ ン を 利用 し た い .…… 有 ……… .280 
6 さま ざま な 形式 の デー タ を 扱い た い .281 
7 Java ア プレ ッ ト を 利用 し た い 
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イン ター ネッ ト 上 で 扱え る 画像 .. 
画像 作成 の コツ .…… 
画像 を 美しく し た い .… 
透過 GIF で 表現 力 を 高め た い . 
デー タ 転 送 中 の スト レス を 軽減 し た い 
動画 デー タ の 利用 ……………… 
アニ メー ショ ン GIF を 作り た い .… 
ムー ビー を 使い た い .…… 
Flash や Shockwave を 使い た い . 
サウ シド デー タ を 使い た し は esa 
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i モ ー ド 対応 HTML .… 
スタ イル シー ト 
JavaScript 


アゲ クセ ジ シビ ピリ ディ .。 


Web ペー ジ カ ラ ー チ ャ ー ト .… 








i モ ー ド 対応 HTML 一 覧 
i モ ー ド 用 絵文字 一 覧 … 
HTML タグ イン デック ス .… 
HTML 属性 イン デック ス .… 
用 語 イ ン デ ックス .…… 
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第 1 部 「HTML タグ リフ ァ レ ンス 」 で は 、HTML タグ の 効果 や 利用 する 場面 に 合 


カテ ゴリ に 分 け て 解説 し て いま す 。 


各 項 目 の タ イト ル は 「 テ キス ト の 色 を 指定 し た い ]」 な ど 、 タ グ の 機能 を や り た いこ と か ら 引 け 
る 形式 に な っ て いま す 。 各 項目 の 構成 要素 は 基本 書式 ・ 解 説 ・ サ ンプ ブル ソ ー ス ・ サ ン ブ ル ソ ー ス 
を 表示 し た 画面 と な っ て お り 、 項 目 に よっ て は コラ ム や スタ イル シー ト を 利用 し た 場合 の メモ を 


わせ て 11 の 
















掲載 し て いま す 。 が 
/ ガメ 
/ 7 
/ 7 
7 / 
7 
/ 7 
/ 
す 
す す 
ナーー よ 
カテ ゴリ ニニ ニニ ニニ ーーー ニー ニー ニー ニー ニー ニーーー ー~]-、、。 琴 / / 
効果 ・ 場 面 に よっ て 分 け て いま す 「 合 - ト 
( 枕 es ー-+ー~ 征 ス | 
具体 的 に 何 が で きる か を 表し て いま す 。 タ 
グ の 使用 目的 か ら 選 ん で くだ さい 
<body alink=" "> </body> 
「 ンプ yekーー ッ oe 
その 項目 で 解説 する タグ の 基本 書式 で す 。 ao 
基本 的 に その 項目 で 解説 し て いる タグ と 必 メーーーーー 
性 は 赤色 、 値 は 青色 で 表記 し て いま す 。 な mozt2hoeme 
お 、 本 書 で は タグ ・ 属 性 ・ 値 と も に すべ て 2 まだ 見 て いな い ( キ ャ ッシュ され て いな い ) ペ ー ジ ヘリ ンク し て いる 部 分 の 色 を 指定 
on: リン ク 肥 分 を 選択 し た 普 間 (クリ ッ ク な ど ) の 色 を 指定 
小文字 で 表記 し て いま す / yink すでに 見 た (キャ ッシュ され て いる ) ペー ジヘ リン ク し て いる 部 分 の 四 を 指定 
〆 に は 、#W の あと に Ob の 値 を 16 進数 で 記述 する か 、 直 授 色 名 (COIormame) を 書き 
人 僧 、 ご コロ ここ コロ ニニ ココ こ ここ ニコ アメ ん よ 了 。 Boimmpc つ いて は p75 を 介し て くだ さい u 
皿 ッ グ 負 価 が と る 価 で か そこ // HEYe れ て いな WSE は ユー ザー の プラ ウザ の 9E に し た が っ て 表示 れ ます 。 
その ご す 。 / 
た だ し 、 項 目 に よっ て は この 欄 で 属性 も 紹 2 
介し て いま す / Pc #f0000" tinke*W0000ff" alimke*fuchsi' 
7 
り 舞 | 本 
@ 津 脱 -- ニ ーーーーーーーーーーーーーーーーーーーー 人 
タグ や 属性 、 値 に つい て の 詳細 な 解説 で す <a hrefs"tink1Lhtml"> まだ 貞 て いな い ペー ジ へ の リン ク は 青 </a><br> | 
メ が < href="tink2.htm"> 選択 され た リン ク は 音 革 </a><br> | 
3 href に "link3.html"> すでに 見 た ペー ジヘ の リン ク は 旦 </a> br | 
@ け サン ブル ソー ス = ニニ ニニ ーー ニー ニー ニーーーーー が た 役 定 し て み ま し た 。 
その 項目 で 解説 し て いる タグ や 属性 を 使用 Be 
し た 具体 的 な サン プル ソー ス で す 。 Mod | 
解説 し て いる タグ ・ 属 性 は 赤色 、 値 は 青色 
で 表記 し て いま す 。 な お 、 紙 面 の 関係 で 一 0 
部 省略 や 、 改 行 を 行っ て いま す 














@HTML4.01 で の 位置 付け 

W3C で 推奨 され て いな い タ グ や 属性 に は 
「DEPRECATED」、 ブ ラウ ザ が 独自 に 拡張 し 
HTML4.01 の 規格 に 準拠 し な い タ グ や 属性 に は 
「HTML4.01 規格 外 」 を 表示 し て いま す 


ーーーーーーーー ー- 介 対 応 ブ ラウ ザ ア イ コン 
その 項目 で 解説 し て いる タグ が 対応 し て いる ブラ 
ウザ (Internet Explorer6.0、Netscape 6.2、 
と も に Windows 版 ) を アイ コン で 示し て いま す 。 
アイ コン 表記 の な い 場 合 、、 そ の ブラ ウザ が 対応 
し て いな いこ と を 示し ます 





(KO 作 WD WW が WCAO ん O へ 2 
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CSS に よる テキ スト の 措 注 


スタ イル シー ト 和 を 利用 し て 剖 価 に テキ スト の 色 を 指定 する 一 馬 は 、 一 例 と し て 2 
タイ ル シ ー ト に つい て 評 し く は 本 曽 妹 閉 『 ス タイ ル シ ー ト 朋 典 基き 感 ] 
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ーー~- @ デ ィ ス プレ イ 
サン ブル ソー ス を 実際 に ブラ ウザ で 表示 し 
た 場合 の 画面 で す 。 対応 し て いな い ブ ラウ 
ザ に は アイ コン に X を つけ て いま す 


ーー- 人 @ コ ラム 
その 項目 の タグ を 使用 する 際 の 注意 点 や 関 
連 す る トピ ッ ク 、 さ ら に 理解 を 深め る た め 
の 内 容 を 掲載 し て いま す 


ノー--- @ CSS に よる 一 


DEPRECATED と 表示 され て いる タグ や 
属性 に は 、 ス タイ ル シ ー ト の 使用 が 推奨 さ 
れ て いま す 。 こ こ で は 、 解 説 し て いる 項目 
の タグ を スタ イル シー ト で 記述 し た 場合 を 
参考 と し て 紹介 し て いま す 


ーーー 介 対 応 表 
旧 バ ー ジ ョ ン に お ける 各 ブ ラウ ザ の 対応 表 
で す (Windows 版 )。Macintosh 版 で の 動 
作 が 異な る 場合 な ど 、 特 策 す べき 点 は 欄外 
に 明記 し て いま す 


ーー- 信 参 照 
関係 の 深い 項目 へ の リン ク で す 。 合わ せ て 
参照 する こと で 体系 的 に 理解 が 深まり ます 


INTRODUCTION 





本 書 は 以下 の 環境 に お ける ブラ ウザ 表示 に 基づい て 記述 され て いま す 。 


日 本 語 版 Microsoft Windows XP 
Windows 版 Internet Explorer 6.0 
Windows 版 Netscape 6.2 


サン ブル ソー ス を 表示 し て いる ディ スプ レイ 画面 は 、 基 本 的 に 各 ブ ラウ ザ の デフ ォ ル ト 設 定 
(初期 設定 ) で す が 、 効 果 が 明確 に 現れ る よう に 
Intemet Explorer 6.0 [文字 サイ ズ ] [最大 ] 
Netscape 6.2 フォ ント 【[ サ イズ] 三 [20] ピク セル 
に 設定 し て いま す 。 
な お 、 サ イズ を 変え た ほう が 効果 が 明確 に 現れ る と 判断 し た 項目 は 、 
Internet Explorer 6.0 [文字 サイ ズ ] = [中 ] 
Netscape 6.2 フォ ント 「[ サ イズ ] = [16] ピク セル 
に 設定 を 変更 し て いま す 。 本 文中 に も 表記 は し て いま す が 、 あ ら か じ め ご 了承 くだ さい 。 


フォ ント は デフ ォ ル ト の まま で す の で Internet Explorer 6.0、Netscape 6.2 と も に 「MS 
P ゴシック 」 と な り ま す 。 

この 設定 は あく まで も 一 例 で す の で 、 ユ ー ザ ー の フォ ント サイ ズ や フォ ント の 種類 に よっ て 必 
ず し も 本 書 の 表示 通り に は な ら な いこ と を ご 了承 くだ さい 。 


HTML の 基礎 /BASIC 
文書 の 基本 /DOCUMENT 
74 コブ 6 
ニン プ 4 プ バ <] コ 

フォ ント /FONT 

リル る 4 に 

イメ ー ジ /IMAGE 

リル アンプ 4 昌 | |. く 

た ず 4 コ 6) 1 (| 

テー ブル /TABLE 

フレ ー ム /FRAME 





その 他 /OTHER 


HTML タグ 
リ ァ ジジ ンジ ル < 








「Web ペー ジ は HTML を 使っ て 記述 し ます 」、 これ は Web ペー ジ を 作成 し よう と する と き の 基 
礎 知 識 と し て 真っ 先 に あげ られ る 点 で す 。 この HTML と は HyperText Markup Language( 八 
イ パ ー テ キス トマ ー ク アッ プ 言 語 ) の 略語 で 、「 タ グ 」 と いわ れる 手段 を 使っ て テキ スト に 構造 や 修 
飾 情報 な ど を 追加 し 、 コ ンピュータ が 情報 を 読め る よう に する 働き を を も っ て いま す 。 現在 W3C 
(World Wide Web Consortium) と いう 非 営 利 団体 が 、 仕様 の 協議 決定 を 行っ て いま す 。 

Web の 急速 な 発展 や 状況 の 変化 に 対応 する た め 、HTML も バー ジョ ン x.x と いう か た ち で 段 
階 的 に 変更 が 加え られ て いま す 。1997 年 12 月 18 日 に は HTML4.0 が 勧告 され 、 翌 98 年 4 月 
24 日 に 改定 、 そ し て 1999 年 12 月 24 日 、HTML4.0 に 多少 の 変更 を 加え た HTML4.01 が 正式 
に 勧告 され まし た 。 現在 使用 され て いる HTML は この バー ジョ ン 4.01 で す 。 

HTML4.0/4.01 が 勧告 され た 際 に も っ と も 注目 され た 点 は 、 表 示方 法 や レイ アウ ト な ど 表 現に 
関す る タグ を 廃止 する 方 針 を と っ た こと で す 。 Web の 発展 に 伴っ て 視覚 的 な 表現 まで を 指定 する 
よう に な っ て いた HTML から 、 そ うし た 本 来 の 機能 以外 の 部 分 を 取り 除き 、 表 現 方 法 に つい て は 
スタ イル シー ト を 利用 し よう と いう も の で す 。 本書 で 「DEPRECATED] の マー ク が つい て いる 
も の は 、 主 に この 視点 に 基づい て 廃止 予定 に つき 推奨 し な いと され た 要素 や 属性 で す (p.5 参 照 ) 

と ころ で この W3C で 定義 され た タグ の ほか に 、 各 ブ ラウ ザ メ ー カ ー が 独自 に 追加 し た タグ も 
存在 し ます 。 Internet Explorer の <marquee> タグ や 、Netscape (Navigator) の <blink> 
タグ な ど が その 一 例 で す 。<frame> タグ の よう に W3C の 仕様 に と り 入 れ ら れ て 標準 化し た も の 
も あり ます が 、 そ れ 以 外 は 相変わらず 特定 の ブラ ウザ ある い は 特定 の バー ジョ ン で の み 動 作 し ま 
す 。 ま た 、<form> タグ の mailto の よう に 、W3C で 排除 され て も 依然 こう し た 主要 な ブラ ウザ 
で は 動作 する 機能 ちあ り ま す 。 本 書 で は Internet Explorer と Netscape (Navigator) が ブラ ウ 
ザ 市場 で 占め て いる 割合 を 考え 、W3C に よる HTML タグ だ け で な く 、 そ れ ぞ れ の ブラ ウザ が 独 
自 に サポ ー ト する タグ も 一 部 含め て 扱っ て いま す 。 し か し 、 ブ ラウ ザ が 独自 に サポ ー ト する タグ 
は 、 公 式 に 定義 され た HTML タグ 以上 に ブラ ウザ を 選ぶ こと に 注意 し て くだ さい 。 本 書 で は 、 ブ 
ラウ ザ が 独自 に 拡張 し た タグ に は 「HTML4.01 規格 外 」 と いう 表記 を つけ て いま す 。 


【 xHTML GOOACKNYCCNOYKCCCCEKITYCKITTOCCCCCCKL い CD 


現在 で は HTML の 次 期 バ ー ジ ョ ン と し て XHTML (eXtensible HyperText Markup Language : 拡張 
可能 な HTML) が 勧告 され て いま す 。 こ れ は HTML に XML の 拡張 性 を も た せる た め に 、HTML の 機能 
を XML で 定義 し な お し た も の で す が 、 文 書 の 作成 に は 基本 的 に HTML の 知識 が 利用 で きま す 。 その た め 
本 書 で HTML を 習得 する こと は 、XHTML へ 移行 する 手助け に も な る で し ょ う 。XHTML に つい て は 
p.310 を 参照 し こく だ さい 。 


OTNETTNKKIRKEKERKRLLKLKLKRKLKLLAAASAARKR は KK ス スス ミミ ミミ スミ ミミ ミミ ミミ オミ ミミ エメ オミ ミミ ミミ まま ます すす 





HTML4.01 


1 隊 





HTML 文書 の 一 番 基 本 的 な 構造 を 示す と 次 の よう に な り ま す 。 









1 
< h1 aign="right" > タグ と 要素 は 別 の も の </h1> 


一 


これ を 別 の 例 を 使っ て も う 少し 詳し く 見 て み ま し ょ う 。 





この 文書 で は まず 最初 に 「Web 辞典 シリ ー ズ に つい て 」 と いう 見 出し が あり ます 。 こ の 後 の 
「 翔 泳社 が 出版 する 一 」 が 本 文 に な り ま す が 、 こ の 本 文 に は 書籍 名 を 順不同 で 並べ た リス ト が 含ま 
れ て いま す 。 ま た 、 こ の あと に は 文章 が 続く か も し れ ま せん し 、 売 上 状況 を 示す 表 が 入る 場合 も 
ある で し ょ う 。 

この よう に いろ いろ な 要素 が あつ まる こと で 、 ひ と つの 文書 が で き 上 が り ま す 。 

こう し た 文書 構造 (文書 が どの よう な 要素 で 構成 され て いる の か と いう こと ) を コン ピュ ー タ に 
理解 させ る た め に は 、 そ れ ぞ れ の 要素 に 専用 の 「 し る し ]」 を つけ て や る 必要 が あり ます 。 こ の 、 要 
素 を 示す し る し が タグ な の で す 。 マ ー ク アッ プ ニ = し る し 付け 、 と いう 言葉 は ここ か ら 来 て いま す 。 








タグ は 通常 開始 タグ と 終了 タグ と いう も の が あり 、 こ の 2 つ で 内 容 を 挟む か た ち で 記述 し ます 。 
た だ し 「 空 要素 ] と いっ て 内 容 を 持た な いも の も あり ます (<img>、<br> な ど )。 こ の 場合 は 開 
始 タ グ の み で 終了 タグ が あり ませ ん の で 注意 し て くだ さい 。 

開始 タグ の 中 に 記述 し 、 各 要素 の 性 質 を 定義 むせ る の が 属性 と その 値 で す 。 値 に は 、left、right、 
center の よう に 既定 の も の と 、 数 値 な どの よう に ドキ ュ メ ント の 製作 者 が 任意 で 書き 込む も の の 
2 つが あり ます 。 

この よう に し る し 付け を する こと で 、 コ ンピュータ は その 部 分 が 文書 の 中 で どの よう な 意味 を 
も っ て いる の か を 判別 し 、 適 切な 表示 が 可能 に な る の で す 。 

な お 、 本 書 で は 、Web ペー ジ を 作る と き に 役立て や すい よう 、< 〇 > タグ と その 属性 、 値 と い 
う 表 現 を 主 に 用 いま す 。 


プロ ッ ク レ ベル 要素 と イン ライ ン レ ベル 要素 ELLELCUCCCC に に エエ エエ メ メメ エメ メオ メメ ミミ エメ オミ ミミ エミ エ 】 


上 で は 「 要 素 ] と ひと くく り に し て 説明 し まし た が 、 よ り 詳 し く は ブロ ッ ク レ ベル 要素 ヒ と イ ン ラ イン レ 
ベル 要素 に 大 別 さ れ 、 他 の どの 要素 を 内 容 に で きる か な どの 決ま り が あり ます 。 こ うし た 関係 は 、 そ れ ぞ 
れ の 要素 ご と に DTD (p.16 参照 ) で 詳細 に 規定 され て いま す 。 

生 ブロ ッ ク レ ベル 要素 

見 出し や 段落 な が ど ひ と つの まとまり を 構成 する 要素 で す 。 一 般 的 に は 前 後に 改行 が 入り ます 。 

address, blockquote, center, dir, div, dL fieldset, form, h1 一 h6, hr, isindex, menu, noframes, ol p, 

pre, table, uL 
皇 イ ン ラ イン レベ ル 要 素 

文字 と 同じ レベ ル で 扱わ れる 要素 で す 。 一 般 的 に は 前 後に 改行 は 入り ませ ん 。 

a, abbr, acronym, applet, b, basefont, bdo, big, br, button, cite, code, dfn, em, font, 1 fame, img, 

input, kbd, labeL map, object, q, s, samp, select, small span, strike, strong, sub, sup, textarea, 寺 , u, 

Var 





※ Ins 要素 、del 要素 は 、 ブ ロッ クレ ベル 、 イ ン ラ イン レベ ル の 両方 で 使え ます 


本 書 は これ ら を あま り 意 識 し な く て も 利用 で きる よう に な っ て いま す が 、 よ り 論 理 的 に HTML を 記述 
する な ら ば ぜひ 理解 し て お きた い 点 で す 。 


し し ルル エエ ミミ ミミ ミエ エエ ミミ ミミ ミミ ミオ メオ ミオ ミミ オオ トト NTLMIIIIIYYNYYYYXYXAYXAYAXXYIIKNYKKKKRYKKXYI 


推奨 し な い 要 素 ・ 属 性 一 deprecated 

先 に 述べ た よう に 、HTML は 本 来 文書 の 論理 的 な 構造 を コン ピュ ー タ に 知ら せる た め の 言 語 と 
し て 開発 され た 言語 で す 。 し か し 実際 は 、 体 裁 、 つ まり 文書 の 見 栄え まで も 定義 むせ する よう に な っ 
て 行き まま し た 。 た と えば 、 色 や フォ ント サイ ズ の 指定 、 レ イア ウト の た め の テ ー ブ ル の 利用 な ど 
が それ に あたり ます 。HTML4.0/4.01 は この 体裁 に 関わ る こと と 構造 に 関す る こと を 分 離さ せ 、 
構造 の 表現 の み に 専念 し よう と いう 姿勢 の も と に 作ら れ ま し た 。 体裁 に つい て は スタ イル シー ト 
の 利用 が 推奨 され て いま す 。 た だ 、 ス タイ ル シ ー ト に 対応 し て いな い ブ ラウ ザ の 存在 や 、 長 らく 
HTML で 体裁 まで を 表現 し て きた 現状 を 考慮 し て 移行 期間 を 設け て いま す 。HTML4.0/4.01 で 
deprecated ( 推 胃 し な い ) と され た タグ の 多く は 、 こ うし た 事情 か ら 同 様 の 表現 に は スタ イル 
シー ト を 利用 する こと を 推奨 し た 上 で 、 廃 止 さ れる 予定 に ある こと を 示し て いる の で す 。 

本 書 で は deprecated と され て いる 要素 ・ 属 性 に は 「DEPRECATED」 と いう マー ク を 付け 
て 区 別して いま す 。 


大 文字 か 小文字 か 

HTML 文書 の 中 で 使わ れる タグ や 属性 は 大 文字 小文字 を 区 別 し ま せん 。 た だ し 、URL、 
JavaScript や スク リブ ト 名 、 文 字 コー ド 名 な ど は 大 文字 小文字 を 区 別 し ま す の で 、 注 意 し て くだ 
さい 。 本 書 で は XHTML (p.310 参照 ) が タグ 、 属 性 、 属 性 の 値 は すべ て な 小文字 で 書く よう 定 
義 さ れ て いる こと を 考慮 し て 、 小 文字 で 表記 する よう 統一 し て いま す 。 


タグ は 入れ 子 に で きる 
タグ に よっ て は 、 タ グ で 囲ん だ 文字 列 の 中 に 別 の タグ や テキ スト を 入れ て 、 入 れ 子 状 に する こ 
と が で きま す 。 た と えば 次 の よう に な り ま す 。 
<P align="center"> タグ と 要素 は <b> 別 の も の </b> で す 。</P> 


URI と URL に に ええ ええ ええ スス オミ ネエ ミオ エネ オオ オ ネオ ミミ ミミ ミミ ネオ ミオ ミミ ミミ ミミ トス KIRKRIREKRREKS】 


HTML 文書 を は じ め イ ンタ ーネット 上 の 特定 の 資源 (リソー ス ) を 示す た め に 、HTML3.2 まで は 
URL (Uniform Resource Locator) と いう 名 称 が 使わ れ て きま し た 。HTML4.0 か ら は この URL に 代 
わっ て より 広義 な 「URI (Uniform Resource Identifers)」 と いう 用 語 が 使用 され る よう に な っ て いま す 。 
URL と 同様 に HTML 文書 ・ 画 像 ・ ビ デオ クリ ッ プ ・ プロ グラ ム な ど を 指定 で きま す が 、URL は URI の 
サブ セッ ト で 、URI の ほう が 上 位 の 概念 で す 。 

本 書 で は 読者 に と っ て 馴染 み の 深い と 思わ れる URL を 使用 し て いま す が 、URI と する の が 正しい 表現 
で す の で 、 ぜ ひ 覚 えて くだ さい 。 


エエ エエ ミミ ミミ ミミ エエ エ エエ ミミ ミミ ミミ ミミ オオ IIIIIITAIKNNKIKKAKAARKIRRREKRRKRKYKKRKKIKEKEETKTO 




















@⑯ 汎用 的 な 属性 
HTML4.01 で は 、 ほ と ん どの 要素 に 対し て 使用 で きる 汎用 的 な 属性 が 定義 され て いま す 。 本書 
で は これ ら の 属性 に つい て 、 一 部 特に 必要 と 思わ れる 項目 で それ ぞ れ 取り 上 げ て いま す 。 
汎用 属性 に つい て 詳し く は 下記 Web ペー ジ を 参照 し こく だ さい 。 
http://www.w3.org/TR/html401/ 


1d=" 名 前 " 

要素 に 対し て 名 前 を 付け ます 。 た だ し 、 同 一 の 文書 中 で 同じ 名 前 を 重複 し て 使う こと は で きま 
せん 。 ス タイ ル シ ー ト の セレ クタ 、 リ ンク の 対象 、 ス クリ プ ト か ら の 参照 、 オ ブ ジ ェクト の 指定 
な ど に 利用 され ます 。 


Class=" ク ラス 名 " 

要素 に 対し て クラ ス 名 を つけ ます 。 id 属性 と は 異な り 、 同 一 の 文書 中 で 複数 の 要素 に 対し 同じ 
名 前 を 重複 し て 使う こと が で きま す 。 また 、 ス ペー ス で 区 切れ ば 、1 つの 要素 に 対し て 複数 の クラ 
ス 名 を 指定 する こと も で きま す 。 ス タイ ル シ ー ト の セレ クタ な ど に 利用 され ます 。 


title=" 補 足 情報 " 
要素 に 対し て 補足 的 な 情報 を 与え ます 。 こ の 情報 の 表現 方 法 は ブラ ウザ に よっ て 異な り ま す が 、 
対応 し て いる 場合 、 一 般 的 に は ツー ル チ ッ プ の か た ち で 表示 され ます 。 


style=" ス タイ ル シ ー ト " 
要素 に 設定 する スタ イル 情報 を 直接 記述 し ます 。 


lang=" 言 語 コ ー ド " 

要素 の 属性 値 や テキ スト 内 容 の 言語 を 指定 し ます 。 一 例 と し て 日 本 語 は 「ja」、 英語 は 「en] の 
よう に 指定 し 、 こ の 属性 を 指定 し な い 場合 の 言語 コー ド は 「unknown] と な り ま す 。 この 属性 は 、 
指定 され た 言語 の 実際 的 な 使用 方 法 に し た が っ て 内 容 を 正しく 表示 し た り 、 音 声 ブ ラウ ザ で 正 し 
く 発音 し た り で きる よう に する も の で す 。 


dir=" テ キス ト の 表記 方 向 " 
要素 内 容 の テキ スト や テー ブル な ど を 表示 する 基本 的 な 方 向 を 設定 し ます 。 左 か ら 右 の 場合 は 
Itr、 右 か ら 左 の 場合 は HI と な り ま す 。 


【 屋 性 の 随 床 MAOAAAKKKAAOACCCCKKIOCCUKKKKIICCCLLILOIOCC 


属性 と その 値 は 複数 を 並べ て 書く こと が で きま す 。 複 数 ある 場合 、 そ の 順序 は 問い ませ ん 。 


TTYYYYCKLLLKCLLLLLLLLLLILILLRKALLLLASSLSISLML ス スス スス ミネ スネ ネス ミネ ミミ ミミ ミミ ミミ ミス オ 】 

















要素 ・ タ グ ・ 必 性 と 値 


@⑯ 値 の 書き 方 (「""」「''」 の 使い か た ) 


属性 の 値 に は 引用 待 (" "や '') を つけ る の が 正しい 書き 方 で す 。 引用 符 は どちら を 使っ て も か 
まい ませ ん 。 ま た 、「"」 (ダブ ルク ォ ー テ ーション ) で 囲 わ れ た 中 に 「'」 (シン グル ク ォ ー テ ー シ 
ョ ン )、 あ る い は その 逆 と いっ た よう に 、 引 用 待 を 入れ 子 状 に し て に 使う こと も で きま す 。 

値 が アル ファ ベッ ト (a 一 Z、A 一 Z)、 数 字 (0 一 9)、 ハ イフ ン (-)、 ピ リオ ド (.) だ け か ら 
な っ て いる 場合 は 、 引 用 符 を 省略 する こと も で きま す が 、 こ うい っ た 場合 に も 引用 符 は で きる 限 
り 省 略 せ すず に つけ た ほう が よい で し ょ う 。W3C で も 引用 待 の 使用 を 推奨 し て いま す 。 


さる 宮 人 - を か で き な い ごと し た ネス スネ オオ オミ ミミ エエ オオ ミミ ミネ メメ ネオ メメ ミミ ミミ ミト SAKEKSRAKKREKKXI】 


Web ペー ジ を 見 て いる と 、 ア クセ スカ ウン ター や アン ケー ト の ペー ジ が 用 意 さ れ て いた り 、 ク リッ ク 
する と 摘 拶 や 注意 の ダイ アロ グ ボ ックス が 表示 され る な ど 、 さ ま ざ ま な 仕掛 け や そ れ ら を 活用 し た 面白 い 
ペー ジ に 次 々 と 遭遇 し ます 。Web ペー ジ を 作り は じ め る と 、 そ うし た 仕掛 け を 自分 の ペー ジ に も 取り 入 
れ た く な る こと で し ょ う 。 し か し 、 そ れ ら の 多く は 本 書 で 扱っ て いる HTML だ け で は 実現 で きま せん 。 
な ぜ な ら HTML は 、 こ の 項 で 説明 され て いる よう に 、 文 書 の 構造 を 定義 むす る も の で あっ て 、「 動 き ]」 を 加 
える 技術 で は な いか ら で す 。 

た と えば Web で よく 見 か ける 仕掛 け を 実現 する に は 、 次 の よう な テク ニッ ク が 必要 に な り ま す 。 


























訪問 者 の 名 前 を 記録 し て お く 一 JavaScript 
ステ イタ スバ ー に 文字 を 流す 一 JavaScript 
アク セス カウ ンタ ー ュ CGI 
フォ ー ム を 送信 する っ CGI 


HTML を 覚え た ら 、 次 は これ ら の 技術 を 身 に つけ る と Web 制作 の 楽し み が さ ら に 広がる こと で し ょ う 。 
本 書 の 内 容 と は 主旨 が 異な る の で 扱い ませ ん が 、 そ れ ぞ れ 専 門 書 は 数 多く 出版 され て いま す 。 ま た 主 な 技 
術 の 概要 は 本 書 の 第 3 部 で も 説明 し て いま す の で 、 そ れ を 足がかり に 次 の 段階 へ 進ん で みて くだ さい 。 


まま ミミ エミ エミ エエ メオ メメ エメ オオ ミミ ミド ミド すす よ すす TAIIEIKKIIAKALKKYKIKIKKKKKEKKKEKKKKKKKEKKEKEKEKKEYI 


要素 ・ タ グ ・ 属 性 と 値 
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HTML で 色 を 指定 する に は 、 次 の 2 つの 方 法 が あり ます 。 た だ し 、 色 を 指定 する に は スタ イル 
シー ト を 利用 する こと が 推奨 され て いま す 。 


#rrggbb (16 進数 で 指定 ) 

「#] に 続け て 、 赤 (r)、 緑 (9)、 青 (D) の 値 を 00 一 ff の 16 進数 計 6 桁 で 表現 し ます 。 た と 
えば 、 黒 を 指定 する 場合 に は 「#000000] と な り ま す 。 基本 的 な 16 色 に つい て は 下 表 を 、 そ の 
他 の 色 の 値 に つい て は 付録 p.340 の カラ ー チ ャ ー ト を 参照 し て くだ さい 。 


色 名 ( 色 の 名 前 で 指定 ) 

色 名 で 直接 指定 し ます 。 大 文字 と 小文字 は 区 別 さ れ ま せん 。HTML4.01 で は 基本 的 な 16 色 が 
定義 され て いま す 。 

基本 的 な 16 色 に つい て は 下 表 を 、 そ の 他 の 色 名 に つい て は 付録 pD.344 の カラ ー チ ャ ー ト を 参 
照 し て くだ さい 。 


red #ff0000 ! navV 


fuchsia #ffOOff , 


maroon #800000 濾 eal りり 1 り 1 り 











HTML で 長 さ を 指定 す る に は 、 次 の 3 つの 方 法 が あり ます 。 指定 で きる 方 法 は タグ に よっ て 異 
な り ま す の で 、 そ れ ぞ れ の 解説 を ご 覧 くだ さい 。 


ピク セル で 指定 
ピク セル を 単位 と し て 整数 で 指定 し ます 。 


ビク セル か パー セン ト で 指定 
基準 と する 水平 方 向 あ る い は 垂直 方 向 に 対し 、 長 さ を ビ クセ ル か バー セン ト で 指定 し ます 。 


ビク セル 、 パ ー セ ント 、 ま た は 相対 的 長 さ で 指定 

タグ に よっ て は 、 ビ クセ ル や バー セン ト (%) の ほか に 「x」 を 利用 し た 割合 に よる 指定 が で き 
ます 。 こ れ ら が 一 度 に 指定 され た 場合 は 、 ま ず 「 ビ ピク セル 」 と 「%」 で 指定 され た 分 が 確保 され 、 
その 残り の 分 が 「*」 の 前 に つけ られ た 数 字 の 割合 で 分 配 さ れ ま す (単に 「*」 と 指定 され た も の 
は 「1x」 で ある こと を 示し て いま す )。 た と えば 、60 ピク セル に 対し て 「x*,2x,3x」 と 指定 し た 場 
合 に は 、 60 ピク セル を 6 分 割 (1+2+3) し て 、 それ ぞ れ 10.20.30 ビク セル と いう こと に な り ま す 。 











HTML で リン ク を 設定 し た り 画 像 を 表示 させ た りす る た め に は 、 リ ンク 先 の HTML ファ イル 
や 画像 ファ イル の 位置 を 正確 に 記述 する 必要 が あり ます 。 こ の 記述 方 法 に は 次 に 示す よう な 「 絶 
対 URL」 と 「 相 対 URL」 の 2 通り の 方 法 が あり ます 。 


絶対 URL 
ある ファ イル の 位置 を 全体 か ら 見 て 、 一 番 も と に な る 位置 か ら 階層 構造 を 順番 に た どっ て 記述 
する 方 法 で 、「http://]」 で 始ま り ま す 。 主 に ほか の サイ ト に ある ペー ジ や 画像 を 指定 する と き に 使 
いま す 。 
例 : http://www.ank.co.jp/index.html 


相対 URL 

ファ イル どう し の 位置 を 、 基 準 と する ファ イル か ら 見 て どこ に ある か 「 相 対 的 ] に 記述 する 方 
法 で す 。 自 分 の Web ペー ジ 内 で は 主 に こち ら の 方 法 を 使い ます 。 フ ァイル の 位置 関係 に よっ て 記 
述 方 法 に も 多少 の 違い が あり ます 。 

まず 、 相 対 URL は フォ ル ダ を 移動 する ご と に 「/| (スラ ッシュ ) を 入れ 、 自 分 の 制作 中 ファ イ 
ル を 基準 に し て 、 上 流 に ある フォ ル ダ に は ひと つつ 階層 を あがる ご と に 「../] の よう に 、 ピ リオ ド 
を 2 つと スラ ッシュ を つけ る と いう 決ま り が あり ます 。 


同じ フォ ル ダ 内 に ある ファ イル を 指定 する 場合 
ファ イル 名 


同じ フォ ル ダ の 中 の 下位 フォ ル ダ に ある ファ イル を 指定 する 場合 
下位 フォ ル ダ 名 / フ ァイル 名 


別 フ ォ ル ダ に ある ファ イル を 指定 する 場合 
.../ 同 位 フ ォ ル ダ / 下 位 フ ォ ル ダ 名 / フ ァイル 名 
-- 同 位 フ ォ ル ダ 名 / フ ァイル 名 
./ 同 位 フ ァイル 名 


絶対 URL と 相対 URL 





た と えば 、 上 図 の よう な 位置 関係 に ある ファ イル で 、main.html か ら そ れ ぞ れ の ファ イル へ 相 
対 URL で リン ク を 設定 する に は 下記 の よう な 記述 に な り ま す 。 


<a href="a.html">a.htm に </a><br> 

<a href="mysub/b.html">b.htm</a><br> 

<a href="../youhp/c.html">c.htm に </a><br> 

<a href="../youhp/yousub/d.html">d.html</a><br> 
<a href="../e.html">e.htmls/a><br> 

<a href=".…/./f.html">f.htm</a><br> 


自分 の Web ペー ジ 内 で 絶対 URL を 指定 する こと も も ちろ ん 可能 で す が 、 オ フラ イン の 状態 で 
使用 する こと や 、 フ ォ ル ダ ご と 移動 させ た い 場 合 の こと を 考慮 する と 、 相 対 URL で 記述 し て お い 
た 方 が 便利 で し ょ う (絶対 URL で 記述 し て し まう と 、 書 き 換え が 必要 に な り ま す )。 





Web ペー ジ の 作成 方 法 に つい て 、 主 な ポイ ント を 簡単 に まとめ て お きま す 。 


@⑯ 作成 に 必要 な も の 





Web ペー ジ を 作る に は 、 イ ンタ ーネット に 接続 が 可能 な PC の ほか 、 主 に 次 の よう な も の が 必 
要 で す 。 


テキ スト エディ タ 

HTML ファ イル は テキ スト ファ イル な の で 、Windows に 付属 の メモ 帳 な ど で 十 分 作成 が 可能 
で す 。 フ ァイル を すべ て 手 入 力 で 作成 する の が 困難 な 場合 に は 、HTML エ ディタ (Web ペー ジ 
作成 ソフ ト ) を 利用 する 方 法 も あり ます 。 


画像 編集 ソフ ト 

自分 で 画像 を 作成 ・ 編 集 す る 際 に 使い ます 。 通常 の Web ペー ジ で は GIF、JPEG、PNG 形 式 
を 、i モ ー ド で は GIF、JPEG (一 部 対応 機 の み ) 形式 を サポ ボー ト し て いる た め 、 必 要 な 画像 形式 
を 扱え る 編集 ソフ ト が 必要 で す 。 HTML エディ タ が この 機能 を サポ ー ト し て いる 場合 も あり ます 。 


FTP ソフ ト 

作成 し た ファ イル や 画像 を プロ バイ ダ の Web サー バ に 転送 する 際 に 使い ます 。 フ リー ウェ ア や 
シェ アウ ェ ア で 入手 で きま す の で 、 自 分 で 使い や すい も の を 用 意 し て くだ さい 。HTML エディ タ 
が この 機能 を サポ ー ト し て いる 場合 も わり ます 。 


プロ バイ タダ と Web サー バ 

イン ター ネッ ト へ の 接続 サー ビス を 提供 する プロ バイ ダ と 、 作 成 し た ファ イル を 置い て 公開 す 
る た め の Web サー バ が 必要 で す 。 た いて い の 場 合 、 プ ロバ イダ が サー ビス の 一 環 と し て Web サ 
ー バ の レン タル を し て いま す の で 、 こ れ を 利用 する の が 簡単 な 方 法 で す 。 プ ロバ イダ と 新規 に 契 
約 を する 際 に は 、 Web サー バ の レン タル 可能 な 容量 、 繋が りや すさ 、 CGI が 利用 で きる か どう か 、 
サポ ー ト は し っ か り し て いる か 、 そ の 他 に どの よう な サー ビス を 提供 し て いる か な ど 、 さ ま ざ ま 
な 面 か ら 検討 し て みる と よい で し よう 。 


12 HTML フ ァイル の 作ら 方 。 


@⑯ 作成 の 手順 


ここ で は 簡単 な HTML ファ イル 作成 の 一 例 を 紹介 し ます 。 


ファ イル を 作る 
メモ 帳 な どの テキ スト エディ タ に 、 表 示し た い 内 容 と 、 そ の 内 容 を コン ピュ ー タ に 理解 させ 意 
図 し た と お り に 表示 させ る た め の タ グ を 記述 し て いき ます 。 


<hea 

<title> 映 画 日 記 </title> 

</heay 

<body bgcolor= "fuchsia> 
> 


<p 
<font size="4 つ うこ の ペー ジ は 、 私 が これ まで に 観 た 映画 の 感想 を 載せ て いま す 。 </font> 
</p> 





ムタ グ は テキ スト エディ タ に 記述 し ます 


この よう に HTML は そう 難解 な も の で は あり ませ ん 。 段落 の 作成 、 改行 、 テ キス ト の 修飾 な ど 、 
それ ぞ れ の 意味 を 持つ タグ を 規則 に し た が っ て 記述 し て いけ ば 、 比 較 的 簡単 に ペー ジ を 作成 する 
こと が で きま す 。 


ファ イル を 保存 する 

作成 し た ファ イル を 保存 し ます 。 フ ァイル 名 は 半角 アル ファ ベッ ト で 、 拡 張子 は .html (も し く 
は .htm) と し ます 。 こ の 保存 し た ファ イル を Internet Explorer や Netscape な どの ブラ ウザ で 
読み 込ん で みる と 、Web ペー ジ と し て 表示 され る は ず で す 。 
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名 前 を 付け て 伴 存 























人 拡張 子 を 「.html| に し ます 


Web サー バ に 転送 する 
FTP ソフ ト 、 ま た は HTML エディ タ の ファ イル 転送 機能 を 使っ て 、 作 成 し た ファ イル を Web サ 
一 條 に 転送 し ます 。Web ペー ジ に 画像 な ど を 埋め 込ん で いる と き は 、 画像 ファ イル も 転送 し ます 。 
サー バ に 接続 する た め の 設 定 や 、 転 送 先 の フォ ル ダ 構 成 は プロ バイ ダ に よっ て 異な る の で 、 確 
認 が 必要 で す 。 


確認 し て みる 
実際 に Web ブラ ウザ を 使っ て 、Web サー バ に 転送 し た ファ イル を 確認 し て みて くだ さい 。 


当直 日 記 





人 イン ター ネッ ト に 接続 し 、 ア ッ プ ロー ド し た ファ イル を 確認 し ます 


i モ ー ド 用 Web ペー ジ の 注意 CCCCCCLLCLLLCLLLULLLLLLLLLLLLLLLLLULLLLLKEKKKLKYYYYYI 


1 モー ド 対 応 の Web ペー ジ の 場合 も 、「i モ ー ド 対応 HTML」 で ペー ジ を 記述 する 点 や 表示 され る 画面 が 
小さ い 点 な ど 一 部 の 特殊 な 状況 を 除け ば 、 作 成 方 法 は 通常 の Web ペー ジ と 同じ で す 。 

た だ し 、i モ ー ド 対応 の Web ペー ジ の 場合 は 、 フ ァイル サイ ズ が 5KB 未 満 と いう 制限 が あり ます 。 こ 
れ は 表示 され る テキ スト だ け で な く 、 タ タグ 部 分 や 同じ 画面 で 表示 され る 画像 の 分 も 含め て の サイ ズ と な り 
ます の で 注意 し て くだ さい (NTT ドコ モ は 2KB 未満 を 推 間 )。 フ ァイル サイ ズ は ファ イル や フォ ル ダ を 
選択 し て 右 ク リッ ク メ ニ ュー の 「 プ ロ パ ティ 」 で 確認 で きま す 。 | モー ド 用 Web ペー ジ に つい て は p.314 
も 参照 し こく だ さい 。 


OK トミ ミスミ ミミ ミミ ミミ トミ ミミ ミミ ミト ト メオ メメ スルト トス スス スス MKA ス MAAAAARIKKKKKKKKKKKKKXRRRKKRKKRKRKREKXXK】 


EL に) た | 


DOCUMENT 


<!DOCTYPE> 





HTML で は 各 バ ー ジ ョ ン で 使用 可能 な タグ や 属性 な ど を 、DTD (Document Type 
Definition、 文 書 型 定義 ) と し て 詳細 に 定義 し て いま す 。 

実際 に HTML 文書 を 作成 する 場合 、 こ の うち どの バー ジョ ン に し た が っ て HTML 文書 を 作成 
する の か を 、 ま ず 宣 言 する 必要 が あり ます 。 こ れ を 文書 型 宣言 と いい 、<!DOCTYPE 一 > の 書式 
で 記述 し ます 。 該 当 す る も の を その まま 文書 の 冒頭 に 書い て くだ さい 。 こ れ を 変更 し て は いけ ま 
せん し 、 も ちろ ん 宣言 し た DTD に し た が っ て HTML 文書 を 作成 し な けれ ば な り ま せん 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<htm> 

<head> 

<title> タイ トル </title> 

</head> 

<body> 


</body> 
</html> 











HTML の バー ジョ ン RECECCCCCCCCCCCCCCCCTPCCCPCYETYKYYYYYYCYYYKYYCCEYYYKYKYYYD 


WS3C で は HTML4.0 を 勧告 する 際 に 、3 種類 の DTD が 定義 され まし た 。 そ の 後 の 1999 年 12 月 24 日 
に は HTML4.0 を 修正 し た HTML4.01 が 勧告 され 、 現 在 使用 され て いる HTML は この 4.01 で す 。 
HTML4.01 の 3 種類 の 文書 型 宣言 の 書式 は 次 の と お り で す 。 


穫 HTML4.01 Strict DTD 
も っ と も 厳密 で 正確 な 仕様 で す 。 推 奨 し な い (deprecated) 要素 や 属性 は 除 か れ て お り 、 フ レー ム も 
使用 する こと は で きま せん 。HTML 文書 を 作成 する に あたっ て は この DTD に し た が う の が も っ と も 望ま 
し い の で す が 、 厳 し い 制 約 が ある た め 、 文 書 の 作成 も 難し く な り ま す 。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://Www.w3.org/TR/html4/strict.dtd"> 


筐 HTML4.01 Transitional DTD 
上 記 の Strict DTD に 、 推 奨 し な い 要 素 ・ 属 性 (その 多く が 、 視 覚 的 な 体裁 に 関わ る も の ) が 含ま れ ま 
す 。 し か し 、 イ ン ラ イン フレ ー ム 以外 の フレ ー ム を 使う こと は で きま せん 。Strict DTD に 比べ て 扱い や 
すい DTD で す が 、 従 来 の バー ジョ ン と の 折 表 案 的 な 仕様 で あり 、 廃 止 さ れる 予定 の 要素 や 属性 が 含ま れ 
て いる こと に 注意 し て 使用 する 必要 が あり ます 。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://Www.w3.org/TR/html4/loose.dtd"> 


穫 HTML4.01 Frameset DTD 
上 記 の Transitional DTD に フレ ー ム が 加わ っ た も の で す 。 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 

















後半 の URL は 省略 する こと も で きま す 。 
な お 、 本 書付 録 の 「HTML タグ 一 覧 ] で は 各 タ グ を 使用 する 場合 の DTD が わか る よう に な っ て いま す 。 
DTD に つい て 、 詳 し く は 
http://www.w3.org/MarkUp/ 
を 参照 し て くだ さい 。 


COLEJ OKTKIIREITRKKKAALRRRRRRRRRRALRIRRRRRRRRIRRRRRRRRERRRRAAALARALALRYKRSRRRS 








に ) な | 





DTD と ブラ ウザ で の 表示 トス メメ メメ オメ メメ ミミ ミミ ミミ メル メメ ミス KKKIKIKIKRRRRRIRRNERIKRRKKKXXXXXXN】 


従来 の Internet Explorer や Netscape で は 、<!DOCTYPE> の 有無 や 、<!DOCTYPE> 後半 の URL 部 
分 を 省略 する か どう か と いっ た 表記 の 違い が 、 コ ン テ ン ツ の 表示 に 直接 影響 を 与 。 $ る こと は あり ませ ん で 
し た 。 し か し 、Windows 版 の Internet Explorer 6、Macintosh 版 Internet Explorer 5.x、Netscape 6 
以降 で は 、 以 下 の 2 通り の 表示 モー ド が 用 意 さ れ 、<!DOCTYPE> の 書き 方 で これ ら の 表示 モー ド が 切り 
替わる 仕組 み に な っ て いま す 。 


標準 準拠 モー ド WS3C の 標準 仕様 に し た が っ て 正しく 表示 する 
互換 モー ド 旧 バ ー ジ ョ ン と の 互換 性 を 考慮 し 、 従 来 の ブラ ウザ と 同様 の 表示 を する 


表示 の 違い が 現れ る の は 主 に スタ イル シー ト を 利用 し た 時 で す が 、HTML だ け で 文書 を 作成 し た 場合 
も 多少 の 影響 が 出 ま す の で 注意 し て くだ さい 。 
HTML4.01 の DOCTYPE 宣言 の 記述 方 法 と 、 表 示 モ ー ド と の 関係 は 次 の よう に な っ て いま す 。 


: 記述 な し 1 1 時 


! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 


lrmM4 ) "http://www.w3.org/TR/html4/strict.dtd"> 1 1 1 
! Stric 0 うた 0 スー 7 っ 1 旨 半 夫 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN" | 


i HTML4.01 ! rhttp://www.w3.org/TR/html4/loose.dtd"> ! 1 1 1 
, Transitional 和合 さ に に セ ら な CGIWPG ら ささ さこ ど ご ご ご ピー ニニ こ と ここら コラ ご ピー ニ こ らら ココ ピ ニコ マジ ヴ ら る RSRP2 つ Ei こら 





※ 標 準 : 標準 準拠 モー ド 
互換 : 互換 モー ド 


た と えば 、DOCTYPE 宣言 の 記述 方 法 以外 は まっ た く 同 じ 内 容 を 持つ 以下 の サン プル を 、 ブ ラウ ザ に 
表示 させ る と 次 の よう な 違い が あら われ ます 。 


サン プル 1 HTML4.01 Trqnsitfionql DTD を URL を 省略 せ ず に 宣言 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN" 
"http://Www.w3.org/TR/html4/loose.dtd"> 





<htm> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<title> 標準 準拠 モー ド の テス ト </title> 

</head> 


<body> 
<div align="center"> 
<h1> 標準 準拠 モー ド </h1> 
<table border="1" width="50%"> 
<tr><th> 曜日 </th><th> クラ ス </th><th> 申し 込み </th></tr> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td> 
<td><input type="radio" checked> 午前 <br/><input type="radio"> 午後 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td> 








<td><input type="radio"> 午前 <br/><input type="radio"> 午後 </td></tr> 
</table> 
</div> 
</body> 
</htm> 





サン プル 2 HTML4.01 Transitionql DTD を URL を 省略 し て 宣言 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<htm> 

<head> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 
<title> 互換 モー ド の テス ト </title> 

</head> 


<body> 
<div align="center"> 
<h1> 互換 モー ド </h1> 
<table border="1" width="50%"> 
<tr><th> 曜日 </th><th> クラ ス </th><th> 申し 込み </th></tr> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td> 
<td><input type="radio" checked> 午前 <br/><input type="radio"> 午後 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td> 
<td><input type="radio"> 午前 <br/><input type="radio"> 午後 </td></tr> 








</table> 
</div> 

</body> 
</htm> 

















PTTTTTHITUDPTIITTTRRTTTTRN 
ファ イル) 細長) 表地 ⑰ お 気 に 入 0⑯ ウー ル D へ ル 2⑰ 


9 の 国人 の の me 吉 pmo0 奉 ケ の の は ・ > 回 


標準 準拠 モー ド 








尾 日 。 クラ ス 申し 込み 
6 午前 
月 | 入門 2 ラス | S 生 










水曜 基礎 ク 2 ラス 





TYPIOITIITWRRTD 


イル 細 和 ⑩ 表示 ⑰ お 気 に 和 0⑯ ウーAD へ 2⑰ 


つの の we 実 pm0 条 77 の 3・ 回 ・ 


互換 モー ド 















^ ム サン ブル 1 を Internet Explorer 6 で 表示 し た 
も の 。「 標 準 準 拠 モ ー ド 」 と な り 、<div 










align="center"> と </div> で 挟ま れ た すべ て の 皿 日 クラ ス 申し 込み 
要素 の 内 容 が セン タリ ング され ます 月 曜 入門 クラ ス に 
ら 午前 
水 忠 基礎 2 ラス 人 


TKPEKD 


人 サン ブル 2 を Internet Explorer 6 で 表示 し た も の 。「 互 換 モー ド ] と な り 、 従 
来 の ブラ ウザ 表示 と 同じ よう に td 要素 の 内 容 は セン タリ ング され ませ ん 


ROCKETKIIKIKLKLKIKRERKKLIKKAKAXKLLKLKLKKAKARAKKLKAKAAXXKXAXLKXYKKKKKKXRS 


HTML の バー ジョ ン を 指定 する 


DOCUMENT 


汗 削 S 喘 


<html> ぐ </html> 
<head> ぐ </head> 
<body> ぐ </bodV> 





<html>、<head>、<body> の 3 種類 の タグ で 、HTML で 記述 され る 文書 の 構造 を 定義 し ます 。 

<html> タグ と </html> タグ は 文書 が HTML で 書か れ て いる こと を 宣言 する も の で 、 文 書 全 
体 の 最初 と 最後 に お きま す 。 例 外 は <!DOCTYPE> (前 項 参照 ) で 、 こ れ だ け は <html> タグ よ 
り も 前 に 記述 し ます 。 

<head> タグ と </head> タグ の 間 に は 、 文 書 の タイ トル や 特徴 、 製 作者 の 情報 を は じ め と し 
た 、 文 書 に 関す る 情報 を 記述 し ます 。 こ こ に 記述 され た 内 容 は 、 基 本 的 に <title> タグ と </title> 
タグ (次 項 参照 ) で 挟ま れ た テキ スト 以外 ブラ ウザ に は 表示 され ませ ん 。 

そし て <body> タグ と </body> タグ で 挟ま れ た 部 分 が 、 実際 に ブラ ウザ に 表示 され る 文書 部 
分 と な り ま す 。 

この <htm>ー </html>、<head> </head>、<body> 一 </body> の 順番 が 入れ 替わる 
こと は あり ませ ん 。 










<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN" 
"http://Www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

文書 の 情報 

</head> 

<body> 

実際 に 表示 され る 文書 の 内 容 

</body> 

</html> 











DOCUMENT 


装 瞳 S 章 放 


<title> て </title> 





<head> タグ と </head> タグ で 挟ま れ た 部 分 に 記述 し て 、 文 書 に タイ トル を つけ ます 。 一 般 
的 な ブラ ウザ で は ここ に 記述 され た テキ スト が タイ トル バー に 表示 され 、「 お 気に入り 」 や 「 ブ ッ 
クマ ー ク 」 に 登録 する と き の デ フォ ルト の タイ トル に も な り ま す 。 ペ ー ジ 内 容 が わか りや すい タタ 
イト ル を 、 文 字数 に も 気 を つけ な が ら 指 定 す る よう 心がけ て くだ さい 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htm charset=Shift_JIS"> 

<title>DICTIONARY OF HOMEPAGE</title> 

</head> 

<body> 

<P>WELCOMEI</> 

</bodV> 


</html> 」 


等 DICTIONARY OF HOMEPAGE 記 DICTIONARY OF HOMEPAGE 


アイ ル (上 編集) 表示 ⑰ お 気に入り F | アイル (F 編集 (⑰ 表示 検索 ⑤ ジャ ンプ (⑬) ブ 


@s・ の 6 国司 る 


WELOOMEI 


























DOCUMENT 


<base href=" 太 "> 
<base href=" 文 "target=""> 





去 eee 絶対 URL 
weeees ウ ィ ン ド ウ 名 、_blank、_self、_parent、_top 





相対 URL で 書か れ た URL が 基準 に する URL を 指定 する タグ で す 。<head> タグ と </head> 
タグ の 間 で 使用 し 、 絶 対 URL で 記述 し ます 。 

これ を 指定 する と 、 相 対 URL で 記述 され た 同じ 文書 内 の URL が この URL を 基準 に し て 認識 
され る よう に な り ま す 。 

target 属性 に は 、 リ ンク 先 の 文書 を 開く デフ ォ ル ト の ウイ ンド ウ や フレ ー ム を 指定 し ます 。 た 
だ し 、 各 リン ク に target 属性 が 指定 され て いる 場合 に は 、 そ ちら の 指定 が 優先 され る こと に な っ 
て いま す (target 属 性 に 関し て は p.262 を 参照 し て くだ さい )。 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://Wwww.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<base href="http://www.ank.co.jp/index.html" target="_blank"> 

<meta http-equiv="Content-Type" content="text/htm charset=Shift_JIS"> 

<title> 基準 と な る URL を 指定 し た い </ せ itle> 

</head> 

<body> 

<D> 

アン ク は <a href="about.htm"> こん な 会 社 </a> で す 。 

</P> 

</body> | 





</htm> 





良 基準 と な る URL を 指定 し た いい - Microsoft Imternet Explorer 
アイ ル (E) 編集 E) 表示 ⑯) お 気 に 入 D⑯ ウー ル ① へ ルプ ⑪ 


装 上 S 普 計 


@m・ の 6 回 較 の の 財 嘉 bmco 仙 タ の の "ウリ 
アン ク は こん な ね 会 社 で す . 





アン ク は こん な 会 社 で す 。 


人 <base> タグ で 指定 し た URL を 基準 に し て リン ク 先 が 認識 され ます 








1 IE5 1 王 記 】 IE6 NN4 NN4.7 に ル 】 
O O O O O O O 
絶対 URL と 相対 URL …… バ トト meeot p-10 新しい ウィ ンド ウ に リン ク 先 を 表示 し た い ………・ . 
リン ク を 設定 し た い …… バ ーー p.146 リン ク を 読み 込 お ウィンド ウ を 指定 し た い ………… 








EL に ) 


24 





DOCUMENT 





<!-- タ グ と --> タグ に 挟ま れ た 部 分 が コメ ント に な り ま す 。 ブ ラウ ザ に は 表示 され な い の で 、 編 
集 時 の メモ な ど に 利用 し ます 。 ま た 、 一 時 的 に 文書 の 一 部 を 隠し た り 、 タ グ を 無効 に し た りす る 
時 に も 便利 で す 。 

<! と -- (ハイ フン 2 つ ) の 間 に は 空白 を いれ ず 、 必 ず 続 け て 記述 し て くだ さい 。 ま た 、 コ メン 
ト は 1 行 で も 複数 行 に わた っ て も か まい ませ ん が 、 コ メン ト 中 に 複数 の ハイ フン を 入れ る こと は 
避け た ほう が よい で し ょ う 。 


5S0URCE 
<P> コメ ント の サン プル ペー ジ 。</P> 
<!-- 更 新 記 録 や メモ 書き に つか えま す --> 
<P> コメ ント の 部 分 は 表示 され ませ ん 。</p> 
<!-- 更 新 記 録 や メモ 書き に つか えま す 。 
複数 行 に な っ て も 大 丈夫 。--> 


ヨコ メン ト を 入れ た - Microsoft mnterne.- 司 | 隔 暫 


アイ ル ⑦ 編集 D 表示 お 気 に AOO ツァ 鞭 


@m- の 回 回 る の 


コメ ント の サン ブル ベー ジ 。 コメ ント の サン ブル ペー ジ . 


コメ ント の 部 分 は 表示 され ませ ん 。 コメ ント の 部 分 は 表示 され ませ ん 。 








DOCUMENT 


| に) 


<address> で </address> 





文書 制作 者 と 連絡 を と る た め の 情 報 (制作 者 、e-mail アド レス 、 住 所 、 電 話 番号 な ど ) を 記載 
する 場合 に 使用 し ます 。 一 般 的 な ブラ ウザ で は イタ リッ ク 体 で 表示 され ます 。 


<address> 

制作 : <a href="homepage/make.html"> 株 式 会 社 ABC</a><br> 

E-mail : <a href="mailto:iwebmaster@abc.co.jp ">webmaster@abc.co.jp</a> 
</address> 
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DOCUMENT 


<meta name=" 太 "content=" 計 "> 





娘 eeesesauthor、description、keywords な ど 
weecname 属性 に 対し て 設定 する 値 





文書 の 著者 、 内 容 、 キ ー ワ ー ド な ど を 定義 し ます 。name 属性 で 特性 を 指定 し 、content 属性 
で その 値 を 設定 し ます 。 必ず <head> タグ と </head> タグ の 間 に 記述 し て くだ さい 。 

name 属性 で キー ワー ド (keywords) を 指定 し て お け ば 、 検 索 エ ンジ ン が 検索 の た め に 参照 
する 情報 を 提供 する こと が で きま す 。 キー ワー ド を 複数 並べ た いと き は 、 そ れ ぞ れ を 「,」 (カン マ ) 
で 区 切っ て くだ さい 。 ま た 要約 (description) に は 、 検 索 結果 の ペー ジ に 表示 され る 内 容 (サイ 
ト の 説明 文 な ど ) を 指定 し ます 。 

こう し た 機能 よ ます べ て の 検索 エン ジン で 有効 に な る わけ で は あり ませ ん が 、 指定 し て お いた ほ 
う が 検 索 に よる 効果 を あげ る こと が で きま す 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 


<html> 

<head> 

<meta name="author" content="taro"> 

<meta name="keywords" content="HTML,tag,reference,attribute "> 
<meta name="description" content="HTML4.01 Reference"> 
<meta name="generator" content="notepad"> 

<title> 著者 、 文 書 の 説明 、 キ ー ワ ー ド を 定義 する </title> 

</head> 

<bodV> 
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DOCUMENT 
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<meta http-equiv=" 友 "content=" 巡 "> 





文 *eeeeContent-Type、Content-Style-Type、Content-Scnipt-Type 
広 weweeehttp-equiv 属性 に 対し て 設定 する 値 





<meta> タグ を 使っ て 、 そ の HTML 文書 で デフ ォ ル ト で 使用 され る 文字 ゴー ド 、 ス タイ ル シ ー 
ト 言 語 、 ス クリ プ ト 言 語 な ど を 指定 する こと も で きま す 。 必ず <head> タグ と </head> タグ の 
間 に 記述 し て くだ さい 。 

多く の 場合 は これ ら の 情報 を 記述 し な く て も ブラ ウザ 側が 自動 的 に 判別 し ます が 、 文 字 化け や 
誤動作 が 生じ な いと も 限り ませ ん 。 正しく 表示 させ る た め に は 指定 し て お くべ き で す 。 


に 】 
Go 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona/EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/html: charset=Shift_J1S"> 

<meta http-equiv="Content-Style-Type" content="text/css"> 

<meta http-equiv="Content-Script-Type" content="text/javascript"> 

<title> 文字 ゴー ド 、 ス タイ ル シ ー ト 言語 、 ス クリ ブ ト 言語 を 指定 する </title> 

</head> 

<body> 


1 に) 


</body> 
</htm> 
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<meta http-equiv="refresh" content=" 友 "> 





文 *eeeewy リ ロー ド す る まで の 時 間 ( 秒 ) 





content 属性 に 任意 の 時 間 ( 秒 単位 ) を 設定 する と 、 そ の 文書 が 指定 され た 秒 数 後に 再読 み 込 
み (リロ ー ド ) され る よう に な り ま す 。 必 ず <head> タグ と </head> タグ の 間 に 記述 し て くだ 
さい 。 

な お 、 リ ロー ド す る と content で 設定 し た 値 も 一 緒 に 読み 込ま れる の で 、 指定 の 秒 数 後に また 
リロ ー ド を 開始 し ます 。 こ れ が 繰り 返さ ぐれ て 結果 的 に は エン ドレ ス で リロ ー ド する こと に な り ま 
す 。 スト ッ プ させ た いと き は ブラ ウザ の [中止] [停止 ] ボタ ン で 止め て くだ さい 。 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://Www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="refresh" content="5"> 

<meta http-equiv="Content-Type" content="text/htmL charset=Shift_JIS"> 

<title> 文書 を リロ ー ド させ た い </title> 

</head> 

<bodV> 

<D> 

<font size="5"> リロ ー ド サン プル </font> 

</P> 

<D> 

<font size="4">5 秒 後に リロ ー ド (再読 み 込み ) し ます 。</font> 

</P> 

</body> 

</html> 


















当 女 書 を リロ ー ド と せ た い - Microsoft Imternet Explorer 同 | 
アア イル) 編集 EC) 表示 ) お 気 に 入 D⑱ ウール ① へ ルフ ⑪ 


@ms・⑨ 団 還 の の 丈 実 sp 価 な の の の 
リロ ー ド サン プル 
5 秒 後 に リロ ー ド (再読 み 込 み ) し ます 。 


午 文書 を リロ ー ド させ た い - Microsoft Internet Explorer 
プア イル) 編集 E) 表示 お 気 に 和 AD⑯ ツー ル ① へ ルプ ⑪ 


@・ の 6 還 還 人 の の 家 mcA9 な の 。 ゆみ 1 
リロ ー ド サン プル 



































文書 を リロ ー ド させ た いい - Netscape 6 





リ = ボツ 
5 秒 後 に リロ ー ド (再読 み 込 み ) し ます 。 


選 文書 を リロ ー ド させ た (いい - Netscape 6 
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自動 的 に ほか の ペー ジ に 移動 し た い p.3g 
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<meta http-equiv="refresh" content=" 文 zurl= 返 "> 





文 *eeee 読 み 込む まで の 時 間 ( 秒 ) 
広 …e 移 動 先 の URL (絶対 URL) 





content 属 性 に 任意 の 時 間 ( 秒 単位 ) と 任意 の 文書 の URL を 設定 する と 、 そ の 文書 が 指定 され 
た 秒 数 後に 読み 込ま れる よう に な り ま す 。 この URL に は http で 始ま る 絶対 URL を 記述 し ます 。 
必ず <head> タグ と </head> タグ の 間 に 記述 し て くだ さい 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<meta http-equiv="Content-Type" content="text/htm charset=Shift_JIS"> 

<meta http-equiv="refresh" 

content="5:url=http://www.ank.co.jp/index.html"> 

<title> 自動 的 に ほか の ペー ジ に 移動 し た い </title> 

</head> 

<bodV> 

<D> 

<font size="5"> アン ク の ペー ジ は 引っ 越し まし た 。</font> 

</D> 

<D> 

5 秒 待っ て も 移動 し な い 場合 は 下記 URL か ら ど う ぞ 。<br> 

新 URL : <a href="http://www.ank.co.jp/index.htm"> 





http://www.ank.cojp/index.htm</a> 
</D> 

</ body> 

</html> 












| 自生 tc は か の ベーラ に 表 動 し た い - Micro 
アイ ル ( 編集: 表示) お 気 に 入 D(⑱ ツー ル ①D へ ルプ ⑬ 


@=・ の 回 の の 誠 pRN9 
アン ク の ペー ジ は 引っ 越し まし た 。 


5 秒 待 っ て も 移動 し な い 場 合 は 下記 URL か ら ど う ぞ 。 
新 URL: http//www ank co.jp/index html 










半 貞 9 曽 康 








ysoft Imternet Explorer に 


の お 気 に 入 D⑯ ツー- ル ①D へ ルプ ⑪ 
較 ぬ の ws 表 束 9 半 ウ 2 





。 @ イ ンタ ネッ ト 。 il 


イタ cyt 
























アン ク の ペー ジ は 引っ 越し まし た 。 


5 秒 待っ て も 移動 し な い 場 合 は 下記 URL か ら ど う ぞ . 
新 URL: http//wwwank co jp/index html 











秒 後に 自動 的 に 移動 し ます EECCCCCCCCE EPCLYYTD RCCPTCCCCCLLLLLD CCCCTTD 


この 機能 の 具体 的 な 使用 例 と し て は 、 サ イト の URL が 変わ っ た と き に 、 新 し い URL を 告知 する と 同時 
に 自動 的 に 新しい サイ ト へ 飛ば す と いう も の が あり ます 。「URL が 変わ り ま し た 」「 引 っ 越し まし た 」「 自 
動 的 に 移動 し ます 」 と いう 表現 を 見 た こと が ある で し ょ う 。 し か し 必ず し も ペー ジ 製 作者 が 意図 し た と お 
り に ジャ ンプ する と は 限り ませ ん の で 、 サ ンプ ル の よう に 移動 先 の アド レス と その サイ ト へ の リン ク も 別 
に 作成 し 、 さ ら に 何 秒 で 移動 する の か も 書き 添え て お く と 親切 で す 。 
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DOCUMENT 


に) 


<link rel=" 文 " href=" 巡 "> 
<Hink rev="" href=" 迄 "> 





娘 eeeeeeindex、Next、Prev、stylesheet ほ か 
※ ゃ eeeeeURL 





<link> タグ は 文書 間 の 関係 (リン ク ) を 定義 せる も の で 、<head> タグ と </head> タグ の 間 
で 使用 し ます 。 

rel 属性 は "Index"、"Next"、"Prev" と いっ た 値 を 使っ て 現在 の 文書 と 別 の 文書 と の 関係 を 定 
義 し ます 。 た と えば 現在 の 文書 が chapter2.html の 場合 は 次 の よう に な り ま す 。 


<head> 

<title>chapter2.html</title> 

<iink re="Index" href="../index.html">ーindex ページ と の 関係 
<link re に "Next" href="chapter3.html"> 一 次 の 文書 は chapter3.html 
<link re="Prev" href="chapter1.html"> 一 前 の 文書 は chapter1.html 
</head> 


また 、 別 に 用 意 し た スタ イル シー ト 用 の ファ イル を 読み 込む と き に も この 属性 を 利用 し ます 。 ス 
タイ ル シ ー ト の 読み 込み に 関し て の 詳細 は 、 ス タイ ル シ ー ト の 項 (p.317) を 参照 し て くだ さい 。 


<link re="stylesheet" href="style.css" type="text/css"> style.css と いう フ 
ァイル を 読み 込む 


rel と rev の 2 つの 属性 は 、 ち ょ うど 反対 の 意味 を 持ち お 、 対 に な っ て いま す 。 rel 属 性 は 順序 が 定 
め ら れ た 文書 内 で 前 方 へ の リン ク を 、rev は 逆 方 向 へ の リン ク を 示す も の で す 。 た と えば 、docA 
と docB の 2 つの 文書 の 場合 は 、 以 下 の ひよ うに な り ま す 。 


A に お いて : <Hink href="docB" re に "foo"> 
B に お いて : <Hink href="docA" rev="foo"> 


2 つ は 同じ 関係 を 表す こと に な り ま す 。 


34 
上 レレ レト トト シ レ b レ シ ヘ S、 0... 所 


し か し 現在 の と ころ 、Internet Explorer や Netscape で は スタ イル シー ト を 組み 込む 場合 を 
除い て こう し た 各種 機能 に は 対応 し て いま せん 。 


針 章 S 潮 


rel、rev 属性 の 値 COCOCOCCOCCCKLLKKK エ エメ エメ メメ メメ メメ メト メメ メメ メメ エミ ミミ メメ メメ メメ メメ メメ メメ メメ 


rel、 お よび rev 属性 で 取り 得る 値 と し て 、W3C で は 次 の よう な 値 を 指定 し て いま す (大 文字 小文字 は 
問い ませ ん )。 


Alternate リンク が ある 文書 の 代替 バー ジョ ン 
Stylesheet 外部 スタ イル シー ト 


Start ひと まとまり の 文書 中 の 最初 の 文書 を 参照 する 
Next 次 の 文書 を 参照 する 
Prev 前 の 文書 を 参照 する 


Contents 目次 

Index 当該 文書 の 索引 

Glossary 当該 文書 に 含ま れる 用 語 の 語 野 解 説 
Copyright 著作 権 に 関す る 部 分 

Chapter ひと まとまり の 文書 中 で 、 章 で ある 文書 
Section ひと まとまり の 文書 中 で 、 節 で ある 文書 
Subsection ひと まとまり の 文書 中 で 、 項 で ある 文書 
Appendix ひと まとまり の 文書 中 で 、 付 録 で ある 文書 
Help ヘル プ の ある 文書 

Bookmark ブッ クマ ー ク 


ROCKIRIKRLKAAAAAAKRKRAKAKAKKXKLKIKKAKKKKKAKKLIRLRKKRRKIKARKRA は RAR 
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DOCUMENT 


EL: に ) 


<SDan> </sDan> 
<div> で </div> 





<Span> タグ は その 範囲 が イン ライ ン レ ベル (Dp.4 参照 ) の 要素 で ある こと を 示し 、 一 般 的 に 
表示 上 の 変化 は あり ませ ん 。 一 方 <div> タグ は その 範囲 が ブロ ッ ク レ ベル (Dp.4 参照 ) の 要素 で 
ある こと を 示し 、 一 般 的 に は 前 後 が 1 行 改行 され て 表示 され ます 。 ど ちら の 要素 も この よう に 文 
書 内 容 に 特定 の 範囲 を 設定 する 以外 の 意味 は 持っ て いま せん 。 

これ ら の タグ は 、 ほ か の 要素 が 利用 で き な い 部 分 に スタ イル シー ト を 適用 し た り 、 言 語 の コー 
ド や テキ スト の 表記 方 法 を 指定 する 場合 な ど に 利用 され ます 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-TVpe" content="text/htmL charset=Shift_JIS"> 
<title> 特定 の 範囲 を 設定 する </title> 
<style type="text/css"> 
-fuchsia {color:#ffO0ff} 
-green {color:green} 
#center {text-align:center} 
#right ftext-align:right} 
</style> 
</head> 


<body> 

<D テ > 

<Span class="fuchsia"> 色 を </span><span class="gqreen"> 変更 </span> 
</D> 

<div id="center"> まとまっ た 範囲 の <br> 位置 指定 </div> 
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<div id="right"> まとまっ た 範囲 の <br> 位置 指定 </div> 
</body> 


0 に) 


</htm> 








当 特定 の 欧 囲 を 設定 し た い - Microsoft Imternet Explorer 
アイ ル (E) 編集) 表示) お 気に入り ⑳ ウー ル ① へ プ ⑬ 


@ 京 ・ の 6 回 還る の ws 宮 smoo 軸 セ の の の あ 


まとまっ た 範囲 の 
位置 指定 
まとまっ た 範囲 の 
位置 指定 








N 特定 の 範囲 を 計 定 し た い - Netscape 6 


http://www shoeishacom/book/pc/t/1 





人 スタ イル シー ト を 特定 の 男 囲 に 適用 し た いと き な ど に これ ら の タグ を 利用 し ます 
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まとめ て 位置 を 指定 し た い … ド ドー ドー 1 
也 ”。 スタ イル シー ト を 使い た い … …P. 











テバ せ 中 


<h 廊 > ン </h 文 > 





支 *eeeee1 --6 





<h> タグ で 見 出し を 設定 し ます 。 全 部 で 1 一 6 の 6 段階 あり 、h1 が 一 番 上 位 、 以 下 数 字 が 大 き 
く な る に つれ て 見 出し の レベ ル が 下がる こと を 意味 し ます 。 

一 般 的 に この タグ に 挟ま れ た 部 分 は 太字 で 、 前 後に 空白 を あけ て 表示 され ます 。 そ し て 、 数 字 
が 大 きい ほど 小さ ざい フォ ント に な り ま す が 、 実際 に 画面 上 に 表示 され る 大 き さ は 、 各 ユー ザー の 
環境 設定 に 左右 され る の で 注意 し まし よう 。 


<h1> 見 出し 1</h1> 
<h2> 見 出し 2</h2> 
、<h3> 見 出し 3</h3> 
<h4> 見 出し 4</h4> 
<h5> 見 出し 5</h5> 
<h6> 見 出し 6</h6> 


こく h> タグ の 意味 CCCCCLLK ス スエ エエ エエ メメ メメ エエ メメ メメ オミ ミミ ミエ エメ エメ エメ メメ メメ ミ メ メメ 上 IIKKKXXXJM 


通常 の ブラ ウザ で は 、<h> タグ で 挟ま れ た 部 分 は テキ スト の サイ ズ が 変え られ 、 さ ら に 太字 で 表示 され 
ます 。 こ れ は 階層 の レベ ル が 視覚 的 に わか りや すい よう ブラ ウザ が 独自 に 解釈 し て 表示 し て いる も の で す 
が 、 こ の 機能 を 利用 し て 、 単 に テキ スト の 大 き さ を 変え た り 太 字 で 表示 する た め に <h> タグ を 使っ て い 
る 例 も 見 られ ます 。W3C の 仕様 に 治っ て 正しい HTML 文書 を 作成 する た め に は 、 こ うい っ た 用 法 は 避け 
る べき で す 。 


COOKTKKKNNK ス スス スミ スミ ミミ ミミ ミミ ミド スミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミト ミミ ドド SKKEIKEKEEREKERKEKRKEKKXKERKKYXXRSRS】 








当 見 出し を 設定 し た - Microsoft Internet Explorer 


イル 編集 ) 表示 お 気に入り ⑯ ツー ル D へ M プ ⑪ 
@ 京 ・6 思 較 人 の の ws 宮 sm29 軸 な の の の ・ ラ 回 ・|』 








YY 見 中 た い 


- アイ ル (P) 編集 表示 


人 N htp//wwww shoeishacom/book/pc ん /taedic 02tex(/3 ] 


人 
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| 32 見 出し の 位置 指定 し た い ーーー ドー p84 











テキ 





<D> で </D> 





その 範囲 が ひと つの 段落 で ある こと を 示し ます 。 一 般 的 な ブラ ウザ で は この 範囲 の 前 で テキ ス 
ト が 改行 され 、 さ ら に 1 行 分 空白 が 挿入 され ます 。 単に 改行 を 目的 と し た 、 内 容 が 空 の <p> タグ 
は 無視 され る の で 、<p> タグ を いく つ 並 べ て も ブラ ウザ に 反映 され る の は ひと つ 分 で す 。 

終了 タグ </p> は 省略 する こと も で きま す が 、 よ り 正 し く HTML 文書 を 作成 する た め に は つね 
に 付け る よう に し た ほう が よい で し ょ う 。 また 、 こ の <p> タグ を 改行 や 行間 の 確保 の た め だ け に 
使用 し て いる 例 を 見 か け ま す が 、 こ れ は <p> タグ 本 来 の 利用 方 法 で は あり ませ ん の で 注意 し て く 
だ さい 。 


<h1> 段落 の 設定 </h1> 

で D テ > 

「Web ペー ジ は HTML を 使っ て 記述 し ます 」]、 こ れ は Web ペー ジ を 作成 し よう する と き の 基 
礎 知識 と し て 真っ 先 に あげ られ る 点 で す 。 こ の HTML と は HyperText Markup Language ( 八 
イ パ ー テ キス トマ ー ク アッ プ 言 語 ) の 略語 で 、「 タ グ ] と いわ れる 手段 を 使っ て テキ スト に 
構造 や 修飾 情報 な ど を 追加 し 、 コ ンピュータ が 情報 を 読め る よう に する 働き を も っ て いま す 。 
現在 W3C (World Wide Web Consortium) と いう 非 営 利 団体 が 、 仕 様 の 協議 決定 を 行っ て い 
ます 。 

P> 

<P> 

Web の 急速 な 発展 や 状況 の 変化 に 対応 する た め 、HTML も バー ジョ ン x.x と いう か た ち で 段 
階 的 に 変更 が 加え られ て いま す 。1997 年 12 月 18 日 に は HTML4.0 が 勧告 され 、 翌 98 年 4 月 
24 日 に 改定 、 そ し て 1999 年 12 月 24 日 、HTML4.0 に 多少 の 変更 を 加え た HTML4.01 が 正式 
に 勧告 され まし た 。 現在 使用 され て いる HTML は この バー ジョ ン 4.01 で す 。 

</P> 








ー 











等 自 基 を 設定 し た い - Microsoft Imternet Explorpr 


アイ ル (F) 編集 ) 表示 お 気 に 入 DO ツー ル D へ ルプ ⑪ 


@ 京 ・ いう) 閲 園 鈴 ノ フ な お 入り ちの の の ・ ほ 較 ・.」 


段落 の 設定 


「Web ペ ー ジ は HTML を 使っ て 記述 し ます 」 、 これ は Web ペ ー ジ を 作成 し よう する と き 
の 基礎 知識 と し て 真っ 先 に あげ られ る 点 で す . この HTML と は HyperText Markup 
Language (ハイ パー テキ スト マー クア ッ プ 言語 ) の 略語 で 、 「 タ グ 」 と いわ れる 手段 を 
使っ て テキ スト に 構造 や 修飾 情報 な ど を 追加 し 、 コ ンピュータ が 情報 を 読め る よう に 
する 働き を も っ て いま す 。 現在 W3C (World Wide Web Consortium) と いう 非 営利 団 
体 が 、 仕様 の 協議 決定 を 行っ て いま す 。 


Web の 急速 な 発展 や 状況 の 変化 に 対応 する た め 、HTML も バー ジョ ン xx と いう か た 
ち で 段階 的 に 変更 が 加え られ て いま す 。 1997 年 12 月 18 日 に は HTML4.0 が 勧告 さ 
れ 、 翌 98 年 4 月 24 日 に 改定 、 そ し て 1999 年 12 月 24 日 、 HTML4.0 に 多少 の 変更 を 加 
えた HTML4.01 が 正式 に 勧告 され まし た 。 現在 使用 され て いる HTML は この バー ジョ 
ン 4.01 で す 。 


AE | 








「Web ペ ー CU c 述 し ます ] 、 の 
は 点 で す 。 こ の HTML と は HyperText Markup Language( ハ 

パー テキ スト マー クア ッ 滞 ) の 時 語 年 で 、 「 タ グ ! と いわ れる 手 隊 ま 合 っ て ナギ スト に 機 
や 相生 報 な と を 電 加 し コン ピュ ー タ が 情報 を 読め る よう に する 働き を も っ て いま す 。 現 
在 W3C(Word Wide Web Consortium) と いう 非 営利 団体 が 、 仕様 の 協議 決定 を 行っ て いま 


Web の 人為 速 な 発展 や 状況 の 変化 に 対応 する た め 、HTML も バー ジョ ン xx と いう か た ち で 段 
階 的 に 変更 が 加え られ て いま す . 1997 年 12 月 18 日 に は HTML4 0 が 勧告 され 、 翌 98 年 4 月 

24 日 に 改定 、 そ し て 1999 年 12 月 24 日 、HTML40 に 多少 の 変更 を 加え た HTML401 が 正式 に 
勧告 され まし た . 現在 使用 され て いる HTML は この バー ジョ ン 401 で す 。 
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段 著 の 位置 を 指定 し た い ・… tet p86 
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HTMIL 文書 で 改行 を 入れ て も ブラ ウザ 上 の 表示 に は 反映 され ませ ん 。 ブ ラウ ザ 上 で 実際 に 改行 
させ る に は 、 改 行 し た い 位置 に <br> タグ を 記述 し ます 。<br> タグ を 複数 並べ れ ば 、 そ の 分 だ け 
余 白 が 確保 され ます が 、 こ れ は W3C の 仕様 に し た が っ た 正しい 使用 方 法 で は あり ませ ん 。 この 
よう に レイ アウ ト を 目的 と し て <br> を 使用 し な いよ うに し まし ょ う 。 

な お 、 コ ン テ ン ツ が ブラ ウザ ウイ ンド ウ の 横幅 に 収まり きら な いと き は 、<br> タグ が な く て も 
自動 的 に 改行 し ます 。 


<P> 
HTML ドキ ュ メ ント 内 の 改行 は 、 
ブラ ウザ 上 の 表示 に 反映 され ませ ん 。<br> 


ブラ ウザ 上 で 実際 に 改行 させ る に は 、 改 行 し た い 位置 に &It:br&gt: タ グ を 記述 し ます 。 
コン テン ツ が ブラ ウザ ウイ ンド ウ の 横幅 に 収まり きれ な いと き は 自動 的 に 改行 し ます が 、 あ 
まり 横 に 長い 文章 も 読み づら い の で 、 ペ ー ジ レイ アウ ト に 悩む と ころ で すね 。 


</p> 





二 改行 させ た ( い - Microsoft Imternet Explorer 


アイ ル ⑪) 編集) 表示 お 気に入り ⑯ ツー ル ①D へ ルプ 


@ 束 ・ の 6 回 回 人 の の 時 誠 pmAD 人 の の 失地 回 ・ 


HTML ド キュ メン ト 内 の 改行 は 、 ブラ ウザ 上 の 表示 に 反映 され ませ ん 。 

ブラ ウザ 上 で 実際 に 改行 させ る に は 、 改行 し た い 位 置 に く br> タ グ を 記述 し ます 。 
コン テン ツ が ブラ ウザ ウイ ンド ウ の 横幅 に 収まり きれ な いと き は 自動 的 に 改行 し 
あま り 横 に 長い 文章 も 読み つづ らい の で 、 ページ レイ アウ ト に 悩む と ころ で 





る イン ター ネット 





HTML ド キュ メン ト 内 の 改行 は 、 ブ ラウ ザ 上 の 表示 に 反映 され ませ ん 。 
ブラ ウザ 上 で 実際 に 改行 させ る に は 、 2 を 記述 し ます 。 コン テ 
ン ツ が ブラ ウザ ウイ ンド ウ の 横幅 に 収まり きれ な いと き は 自動 的 に 改行 し ます が 、 あ まり 
横 に 長い 文章 も 読み つら い の で 、 ペー ジレ イア ウト に 悩 も と ころ で すね . 





人 <br> タグ の 部 分 で 強制 的 に 改行 され ます 








1! IE5 1 王 ] 3:】 NN4 NN4.7 (ルコ 
O O O O O O 人 
款 | 改行 させ な いで 表示 し た い ドド ドド ーー p.44 テー ブル に 対す る 回 り 込み を 解除 し た い ……………・ p.205 
ピス 画像 に 対す る 回 り 込み を 解除 し た い …………ー………| p.138 





gr み AE SI 


アキ 





IIEXUE し 71 隔 


<nobr> </nobr> 





通常 ブラ ウザ で は 、 画 面 に 収まる よう に 、 ウ ィ ン ド ウ の 幅 に 合わ せ て テキ スト を 自動 的 に 改行 
し て いき ます 。 し か し 、<nobr> タグ と </nobr> タグ で 挟む と その 範囲 の テキ スト は 改行 され ず 
に 1 行 で 表示 され る よう に な り ま す 。 

<nobr> タグ は 、Internet Explorer お よび Netscape (Navigator) で は 対応 し て いま す が 、 
HTML4.01 で は 削除 され 仕様 に は 含ま れ て いま せん 。 





SD テ > 

<nobr> 

通常 ブラ ウザ で は 、 テ キス ト が 画面 に 収まる よう に 、 ウ ィ ン ド ウ の 幅 に 合わ せ て テキ スト を 
自動 的 に 改行 し て いき ます 。 し か し 、&ltnobr&gt: タ グ で 挟む と 中 の テキ スト は 改行 され ず 
に 一 行 で 表示 され る よう に な り ま す 。 

</nobr> 

</D> 








ご の あたり で 改行 させ た いと き の タ グ (改行 許可 ) ミミ ミミ メメ 】 ETAEIIRRRIRRKRXERRRRLXRKRY 


長い 文章 の 中 で 改行 し て も 良い 位置 を 指定 する 時 に は <wbr> タグ を 使用 し ます 。 た だ し 、 あ くま で も 
改行 候補 位置 な の で 必ず し も その 位置 で 改行 され る と は 限り ませ ん 。 


政行 で # な いで 表 元 し た いい - Microspf Internet Explorer 
( ル D 編集 ) 表示 お 気に入り ツー ル ① へ 2⑪ 


GOm- の 国司 人 @ の 支 pm20 軸 ダ の の の - 計 回 ・J 


アイ ル (D 太 要 6) 表示 ⑦ お 気 に 入 0 00 
GO の 人 の の we 衣 pw2o 軸 ダ の の らら ・ 計 較 ・J 














合わ せ て テキ スト を 自動 的 に 改行 し て いき 民 
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テキ 


テキ 中 


46 







入力 し た と お り に 表示 し た い 


<Dre> で </Dre> 






この タグ で 囲ま れ た 部 分 が 、 整 形 済 みな で ある こと を 示し ます 。 通常 cpre> タグ と </pre> タグ 
で 挟ま れ た テキ スト は 等 幅 フ ォ ン ト で 表示 され 、HTML 文書 内 の 空白 文字 や 改行 な ど が ブラ ウザ 
画面 に その まま 反映 され ます 。 


S0URCE 


<Dre> 
function OpenWin({ 
var winnew = window.open(","winnew","toolbar=no, 


status=no,location=no,menubar=no,scrollbar=no"): 


winnew.document.write("<b> 新しい ウィ ンド ウ を 開き ます </b>") 
winnew.document.close(): 


1 
</pre> 





入力 し た と お り に 表示 し た い 


当 入力 し た と お り に 表示 し た - Microsoft mternet Explorer 
アイ ル E) 編集 CE) 表示 お 気 に 入 D⑯ ツー ル ①D ヘル プ ⑪ 


GR ・ の 回 還 の の 5m0 仙 ケ の の > 


function OpenWin()[ 
yar winnew = window.open(““ winnew toolbar=no, 
status=no, location=no ,menubar=no,scrollbar=no" ): 


winnew.document.write(" 新 し いい ウィンドウ を 開き ます ”): 


winnew .document .close( ): 


| 全 イ ンタ ーネット 





入力 し た と お り に 表示 し た い - Netscape 6 回 回 図 
> アイ ル (F) 編集 (E) 表示 ( び 検索 ジャ ンプ ⑬ ブッ クマ ー2(B) 222(①D ヘル プ ⑪ 


function OpenWinO[ Ad 
Var winnew = 間 0、 ・ Winnew, toolbarno, 
status=no, ocat ion=no,menubar=no,scrol lbar=no 
Vinnet dhoument-write(、 新しい ウィ ・ 2 ドウ を 開き ます ”): 
winnew.document .close(): 








IE4 IE5 IE5.5 IE6 NN4 DD N6.2 
O O O O O O O 
隔 、 技 術 87 な 意味 を 示し た い ーーーーーーー… p56 
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<blockquote> で </blockquote> 





比較 的 長い 文章 を 抜粋 ・ 引 用 する と き に 使用 し ます 。 一 般 的 に <blockquote> タグ と 
</blockquote> タグ で 挟ま れ た 部 分 は 上 下 に 1 行 分 の スペ ー ス が 挿入 され 、 左 右 も イン デン ト 


( 字 下げ ) され て 表示 され る の で 、 上 下 左右 に スペ ー ス が あく 形 に な り ま す 。 


<P テ > 

ある 原稿 より 引用 。 

</P> 

<blockquote> 

<P> ノ 
「Web ペー ジ は HTML を 使っ て 記述 し ます 」、 こ れ は Web ペー ジ を 作成 し よう する と き の 基 
礎 知 識 と し て 真っ 先 に あげ られ る 点 で す 。…… (中 略 ) …… を 行っ て いま す 。 

</P> 

<D> 

Web の 急速 な 発展 や 状況 の 変化 に 対応 する た め 、HTML も バー ジョ ン x.x と いう か た ち で 段 
階 的 に 変更 が 加え られ て いま す 。……| (中略) …… この バー ジョ ン 4.01 で す 。 

</D> 

</blockquote> 











所 在 情報 を 示す 1 て コ 属性 POKERRKEXLXLS は SI KKTKEERKKKSKSSSSKSKSSKIKS ま さえ 


HTML4.01 で は 、<blockquote> タグ に 、 引 用 し た ソー ス や メッ セー ジ の 所 在 情報 を 示す た め の cite 


属性 が 定義 され て いま す 。 


<blockquote cite=""> 一 </blockquote> 


廊 に は 引用 元 の URL を 入力 し ます 。 
た だ し 、 現 在 の と ころ Internet Explorer や Netscape の 表示 で は 特に 変化 は あり ませ ん 。 


COEXTKIIREKDIKAXLXKKKLLKKRKKXKXKREKRKRIIRRRRRRRRRRRRRRRERRKRKREKKKSK ス ミミ ミミ ミコ 








カイル) 編集 D 表示 お気 に 入 D⑯ ツー ル ①D へ ルプ 
@・ の 6 回 国人 の の we 支 pmoo 軸 な 7 の 8・ 回 ・J 
ある 原稿 より 引用 。 


「Web ペ ー ジ は HTML を 使っ て 記述 し ます 」 、 これ は Web ペ ー ジ を 作成 し よう す 
る と き の 基 礎 知識 と し て 真っ 先 に あげ られ る 点 で す 。 この HTML と は 
HyperTsxt Markup Language (ハイ パー テキ スト マー クア ッ プ 言語 ) の 略語 で 、 
「 タ グ 」 と いわ れる 手段 を 使っ て テキ スト に 構造 や 修飾 情報 な ど を 追加 し 、 コ ン 


テキ 中 


ピュ ー タ が 情報 を 読め る よう に する 働き を も っ て いま す 。 現在 W3C(Word Wide 
Web Consortium) と いう 非 営利 団体 が 、 仕様 の 協議 決定 を 行っ て いま す 。 


Web の 旋 速 な 発展 や 状況 の 変化 に 対応 する た め 、HTML も バー ジョ ン xx と い 
うか た ち で 段階 的 に 変更 が 加え られ て いま す 。 1997 年 12 月 18 日 に は 
HTML4.0 が 勧告 され 、 翌 98 年 4 月 24 日 に 改定 、 そし て 1999 年 12 月 24 日 、 
HTML40 に 多少 の 変更 を 加え た HTML4.01 が 正式 に 勧告 され まし た 。 現在 使 
用 され て いる HTML は この バー ジョ ン 4.01 で す . 


















ある 原稿 より 引用 。 


「Web ペ ー ジ は HTML を 使っ て 記述 し ます 」 、 これ は Web ペ ー ジ を 作成 し よう する と き の 
基礎 知識 と し て 真っ 先 に あげ られ る 点 で す 。 この HTML と は HyperText Markup 
Laneaee( ハ イ パ ー テ キス トマ ー ク アッ プ 語 の 時 で 「 タ グ 」 と いわ れる 手段 
使っ て テキ スト に 構造 や 修 館 情報 な ど を 追加 し 、 コ ンピュータ が 情報 を 読め る よう に 
する 働き を も っ て いま す 。 現在 W3C(World Wide Web Oonsortium) と いう 非 営利 団体 
が 、 仕様 の 協議 決定 を 行っ て いま す 。 


Web の 急速 な 発展 や 状況 の 変化 に 対応 する た め 、HTML も バー ジョ ン xx と いう か た ち 
で 段階 的 に 変更 が 加え られ て いま す 。 1997 年 12 月 18 日 に は HTML40 が 勧告 され 、 翌 
98 年 4 月 24 日 に 改定 、 そ し て 1999 年 12 月 24 日 、HTML40 に 多少 の 変更 を 加え た 
4 01 が 正式 に 勧告 され まし た 。 現在 使用 され て いる HTML は この バー ジョ ン 401 
で 9 





4 引用 され た 部 分 は 上 下 左右 に スペ ー ス が あい た 状態 で 表示 され ます 











1 IE5 IE5.5 1 ヨガ NN4 NN4.7 N6.2 
O O O O O O O 
1 短い 文章 を 引用 し た い …… ド ーー p.50 
い 情報 源 を 示し た い …… ド ーー ドーーーーーーーー p.5 ら 


義和 49 





テキ 







短い 文章 を 引用 し た い 


<d> で </q> 






改行 を 必要 と し な いよ うな 比較 的 短い 文章 を 抜粋 ・ 引 用 する と き に は 、<q> タグ を 使用 し ます 。 
対応 し た ブラ ウザ で は 、 引 用 部 分 の 前 後に 自動 的 に 引用 待 が 付け られ る の で 、 ユ ー ザ ー 側 で 引用 
符 を 付け な いよ う 注 意 し て くだ さい 。 


<P> 
株 式 会 社 ア ンク の ホー ムペ ー ジ に は 


< ロ テ 


株 式 会 社 アン ク は 、 い ろ い ろ な 面白 いこ と に 取り 組む 会 社 で す 。 
</q> 

と 書い て あり ます 。 

</D> 





短い 文章 を 引用 し た い 


委 征 い 文章 を 引用 し た い - Microsoft Internet Explorer 同 回 | | 際 | 
アイ ル E) 編集 表示 お気 に 入 D ウール ① ん 2⑬ 


@・9 癌 国人 @ の 昧 均 5KO 軸 7 の の 


会 社 アン ク の ホー ムペ ー ジ に は 株 式 会 社 アン ク は 、 い ろ い ろ な 
面白 いこ と に 取り 組む 会 社 で す 。 と 書い て あり ます 。 





テ ? う ! せ 中 








人 Internet Explorer は 対応 し て いま せん 


N 短い 文章 を 引用 し た い - Netscape 6 
、 ア イル 編集 ) 表示 QV 検索 ) ジャ ンプ Q プッ クマ ー2(B) タ 22(D ルプ ⑪ 


株 式 会 社 ア ンク の ホー Ge は 株 式 会 ミア ンク は 、 い ろ いろ な 面 
しい こと に 取り 組む 全社 で す . と 書い て あり ま 


ュ メン ト : 玩 了 (1.182 秒 ) 





人 <q> タグ で 挟ま れ た 部 分 に 引用 符 (") が 付き ます 





所 在 情報 を 示す cite 属性 ミス ミミ ミミ ミミ メ ミミ ミミ ミミ ミミ ミオ ミミ ミミ ミミ オミ ミミ オミ ミミ ミミ ミミ ミミ ミミ ミミ メス メス 計 すり ます 】 


HTML4.01 で は 、<q> タグ に 、 引 用 し た ソー ス や メッ セー ジ の 所 在 情報 を 示す た め の cite 属性 が 定義 
され て いま す 。 


<q cite="">ー</q> 
文 に は 引用 元 の URL を 入力 し ます 。 
た だ し 、 現 在 の と ころ Internet Explorer や Netscape の 表示 で は 特に 変化 は あり ませ ん 。 


COLINKTXAAAKIKLKILKAAALKAKLKKLKKIKLKIAKRXAAXKRAKRKAXAKRKLKLAKIKIIRRRRRIRXRRKKKKNI 


1 ズ 】 1 1 た) 1 ココ NN4 NN4.7 ド に ルイ 





※ Macintosh 版 Intemet Explorer 5 は 対応 し て いま す 


長い 文章 を 引用 し た い 
情報 源 を 示し た い 






W 





アバ せ 軸 





<cite> て </cite> 





引用 元 な ど ほ か の 情報 源 を 参照 する 部 分 で ある こと を 示し ます 。 

<blockquote> タグ や <q> タグ が 文章 を その まま 引用 する 場合 に 使用 する の に 対し 、 こ の 
<cite> タグ は 人 物 名 や 書籍 名 、 規 格 な ど 、 引 用 (参照 ) し た 情報 の 名 前 や タイ トル を 示す 場合 
使用 し ます 。 一 般 的 な ブラ ウザ で は イタ リッ ク 体 で 表示 され ます 。 


S0URCE 
<D> 
より 詳し い 情報 は <cite>[ISO-8859-1]</cite> で 見 られ ます 。 
</D> 


| 人吉 を 示 い 2 い - Microsoft Internet Explo 
プア イル}) 編集) 表示 ) お 気 に 入 DO ツー ル ① 2 


@・ の 6 回 還 人 の ws 実 5m29 人 W な の の 氏 ・ 只 回 
より 詳し い 情 報 は SO-9929-/ で 見 られ ます 。 





N 情報 源 を 示し た い - Netscape 6 








長い 文章 を 引用 し た い 
短い 文章 を 引用 し た い …・ 








レセ の ES 


<dfn> て </dfn> 





用 語 の 定義 を 行っ て いる こと を 示し ます 。 Internet Explorer と Netscape 6 で は イタ リッ ク 
体 で 表示 され ます 。 


<P> 

階層 化 デ ィ レ クト リ に お いて 、 現 在 ユー ザー が 作業 し て いる ディ レク トリ を <dfn> カレ ン 
トディ レク トリ </dfn> と いい ます 。 

</D> 





等 定 表 語 を 示し た い - Microsoft Internet Explorer 


アイ ル (F) 編集) 表示 お 気 に 入 D⑯ ツー ル ① ヘル プ (⑪ 


階層 化 デ ィ レ クト リ に お いて 、 現在 ユー ザー が 作業 し て いる ディ レク トリ を 
カレ ン た テテ レク た と ヒ い いま す 。 





駅 定義 語 を 示し た い 


階層 化 デ ィ レ クト リ に お いて 、 現在 ユー ザー が 作業 し て いる ディ レク トリ を カレ ン ム 
ディ と クト と いい ます 。 











技術 的 な 意味 を 示 じ だ Shoeesesnaiecsdseneescvs p.56 


IO 、: 















<em> や </em> 強調 
<Stronq> で </StrOhd> より 強い 強調 






<em> タグ は 強調 、<Strong> タプ は より 強く 強調 され る こと を 示し ます 。 一般 的 な ブラ ウザ 
で は <emz> は 綱 体 で 、<strong> は 太字 で 表示 され ます 。 


S0URCE 


<D> 
<emz> 強調 し て み ま す </em> 
</P> 


<D> 
<strong> より 強い 強調 で す </strong> 
</P> 





当 紅 し た い - Microsoft.… 司 | 帳 | 孤 
アフ イル) 編集 G) 表示 の ” 午 


②%・@ - 図 「 必 " 


有 間 し て み ま チ 吹 廊 し て み ま チ 


より 強い 強調 で す より 強い 強調 で す 











IE! IE5 IE5.5 IE6 RI RE2 RE 
O O O O O O O 
フォ ント スタ イル を 指定 し た いそ の 1 …………… p.106 





テキ 





<SUp> タグ は 上 付き 文字 を 、<sub> タグ は 下 付き 文字 を つく り ま す 。 一 般 的 に 、 ど ちら も 小 
さめ の 文字 で 表示 され ます 。 


<D テ > 

これ が 標準 <sup> これ が 上 付き 文字 </sup> 
</P> 

<D テ > 

これ が 標準 <sub> これ が 下 付き 文字 </sub> 
</P> 





| 当 上 生き 文字 - 下 付き 文字 を 指定 し 司 | 阿 || 
イル) 編 信 6) 表示 お 気 に AO(” 鞭 


@s・ の 6 回 回 の "の" 


- れ が 標準 - れ が 上 付き 文字 これ が 上 付き 文字 
これ が 標準 ー れ が 林 浴 これ が 上 付き 文字 


人 き x 季 これ が 標準 - れ が 下 付き 文字 





の イン ター ネッ ト 








1 1 1 王 】 1 ゴゴ NN4 DC 守 4 が に ルオ 
O O O O O O O 








テキ 


56 





<code> ぐ </code> 
<kbd> ぐ </kbd> 
<Samp> や </samDp> 
<Var> ぐ </Var> 





コン ピュ ー タ の ソー スコ ー ド や 出力 結果 を 表す と き に これ ら の タグ で 挟み ます 。 
<code> プロ グラ ム な ど コ ンピュータ の ソー スコ ー ド を 表す 
<kbd> ユー ザー に よっ て 入力 され る 文字 で ある こと を 表す 
<SamD> プロ グラ ム や スク リプ ト の 出力 結果 の サン プル で ある こと を 表す 
<Var> 変数 や 引数 を 表す 
一 般 的 な ブラ ウザ で は 、 <var> タプ は イタ リッ ク 体 で 、 それ 以外 は 等 幅 フ ォ ン ト で 表示 され ます 。 


<D> 
<Dre><code> 
mylmage = new Image(: 
mylImage.src = "pretty.gif: 
</code></pre> 
</P> 
<D> 
<kbd>DEL Ai\SAMPLE.TXT /P</kbd> と 入力 し て み ま し ょ う 。 
</D> 
<D> 
<Samp>A:\SAMPLE.TXT, 削除 し ます か (Y/N) ?</samp> と いう 確認 メッ セー ジ が 表 
示さ れ ま す 。 
</D> 
<D> 
値 を 変数 <Var>i</Var> に 代入 し ます 。 
</P> 











6 











当 技術 的 な 意味 を 示し た いい - Microsoft Internet Explorer 


アイ ル ⑤) 編集 ) 表示 Q お気 に 入 D ウール D へ ルプ ⑪ 


GR の 回 加 全 の we 支 5moo 7o の 全 - 肝 存 ・ 避 


mylmage = new Image( ): 
mylImage.src = “pretty.gif": 


DEL A:\SAMPLE.TXT /P と 入力 し て み ま し ょ う 。 
A:\SAMPLE.TXT, 削除 し ます か (Y/N) ? と いう 確認 メッ セー ジ が 表示 され ます 。 
値 を 変数 た 代入 し ます 。 


PTTTNT 





mylmage = new Image(): 
mylmage.src = pretty.gif": 


DEL A: \SAMPLE.TXT /P と 入力 し て み ま し ょ う 。 
: \SAMPLE.TXT, 削除 し ます か (YN) ? と いう 確認 メッ セー ジ が 表示 され ます 。 
値 を 変数 に 代入 し ます 。 











! IE5 IE5.5 IE6 NN4 DDYW2 N6.2 
O O O O O O O 

PPm、 入 力 し た と お り に 表示 し た い ーーーーーーーーー p.46 

に アデ 定義 語 を 示し た い … パ バド (ーー ドド ドド ドド ドド ーー p.53 


NN 57 





テハ せ 中 


<abbr title=" 太 "> や </abbr> 牙 語 
<acronym title=" 友 "> や </acronVIm> 頭字 語 





文 eees 省 略し な い 状 態 の テキ スト 





これ ら の タグ は 、 そ の 部 分 が 略語 で ある と いう こと を 示し ます 。 

1 文字 ずつ 読み 、1 つの 発音 で 表現 で き な い よう な 略語 ( 例 : WWW、HTTP、URI.…) の 場 
合 に は <abbr> タグ を 使い ます 。 現在 の と ころ Netscape 6 以上 が 対応 し て いま す 。 

一 方 <acronym> タグ は 、 そ の 略語 を 1 つの 単語 と し て 発音 する も の ( 例 : NATO、WAC、 
radar.…) に 対し て 使用 し ます 。 

いずれ も 、 省 略し な い 状態 の テキ スト は title 属性 (p.6 参照 ) で 指定 し ます 。 


<P> 

<abbr title="Uniform Resource Identifers">UR</abbr> と は Uniform Resource 
ldentifers の 略語 で す 。 

</D> 

<D> 

<acronym title="United Nations Educational Scientific and Cultural 
Organization ">UNESCO</acronVm> の 活動 内 容 を 説明 し な さい 。 

</p> 











アイ ル ) 編集 ED) 表示 ⑰ お 気に入り ⑱ ツー ル ① ヘル プ ⑪ 


URI と は Lniform Resouroe Identifers の 略語 で す 。 
UNESCO の 活動 内 容 を 説明 し な さい 。 


2E | 








4 Intemet Explorer は <acronym> タグ の み 対 応 し て お り 、 カ ー ソ ル を 近づけ る と tile 属性 の 内 容 が ツー ル チ ッ プ に 
表示 され ます 








4^ Netscape 6.2 で は <abbr><acronym> の 両方 に 対応 し て お り 、 該 当 部 分 に 下線 が 付き ます 。 カ ー ソ ル を 近づけ る 
と tie 属性 の 内 容 が ツー ル チ ッ プ に 表示 され ます 








1! IE5 1 王 和 】 IE6 NN4 NN4.7 ド (: ル 4 
abbr 3 し メ メ メ ※ 〇 O 
acronym 3 O O O ※ ※ O 





※ Netscape 6.0 で は タグ 部 分 の 下線 は 表示 され ませ ん 
※ Macintosh 版 Internet Explorer 5 は <abbr> タグ に も 対応 し て いま す 





テバ せ 中 


<1ns> で </1ns> 





HTML 文書 の 更新 時 に 追加 され た 部 分 は <ins> タグ で 示し ます 。 

実際 の 表示 方 式 は ブラ ウザ に よっ て 異な り ま す が 、 追 加 部 分 で ある こと が わか る よう に 、 本 文 
と は 異な る 書体 や スタ イル な ど で 表 示さ れる よう 定義 され て いま す 。 法案 や 公式 文書 な ど 変 更 履 
歴 が 必要 な 場合 に 、 挿 入部 分 の 目印 と し て 利用 で きま す 。 


の 
規則 を 改め 、 
<ins> 翌日 の 出社 時 間 を 前 日 中 に 予定 表 に 明記 し て お く こ と に し まし た 。</ins> 


</p> 





| 妥 追 な れ た 部 分 を 示し た い - Microgoft imternet 
アイ ル (5) 編集 表示 お 気に入り ④ ツー ル ① ん へ ルプ ⑩ 


@・ の 名 人 の の we 実 5KcAO 愉 王 の の ( 








人 <ins> タグ で 挟ま れ た 部 分 に 下線 が 表示 され ます 





60 清和 
上 レレ シキ モニ ト キー ニュ ニニ ニニ ニニ ニニ ニー ニニ ーー ーー ーー ーー ーー 


追加 の 理由 と 日 時 を 示す 属性 トト エミ トミ ミミ ミミ ミミ ミミ ミミ ミミ ミオ ミオ ミミ スミ オト トト SEIEKESEREKEKRESEI】 


HTML4.01 で は <ins> タグ と 次 項 の <del> タグ に は 、 そ れ ぞ れ 追 加 ・ 削除 理 由 を 記述 し た 文書 の URL 
を 指定 する cite 属性 と 、 追加 ・ 削除 し た 日 時 を 表す datetime 属性 が 定義 され て いま す 。 

datetime 属性 に は 、HTML4.01 で 定義 され た 日 付 ・ 時 間 の 表記 方 式 (ISO8601 形式 : 下 の コ ラム 参 
照 ) に し た が っ て 日 時 を 記述 し て くだ さい 。 た だ し 、 現 在 の と ころ Internet Explorer や Netscape の 表 
示 で は 特に 変化 は あり ませ ん 。 


テキ 中 


<ins dite=" 誠 "datetime=" 計 ">ー</ins> 
衣 は 追加 し た 理由 が 記述 され た 文書 の URL 
交 は 追加 日 時 (ISO8601 形式 ) 
た と えば 、 以 下 の よ うに 使用 し ます 。 
<D> 
規則 を 改め 、<ins cite="http://www.ank.co.jp/xxx/kisoku/ins_sample.htm' 
datetime="2002-02-10T21:48:30+09:00"> 翌 日 の 出社 時 間 を 前 日 中 に 予定 表 に 明記 し て お く こ と に し まし 
た 。</ins> 
</D> 


OLKIKIIKIKKKLAAAEKKKKKLLLAKAKIKKLKXKKIKKILLALAKLKLKKNKLKMAAALAALAKAKYXXX】 


日 付 ・ 時 間 の 表記 方 法 し は ミミ スス メス ミス ミミ スミ メメ ミミ オミ オミ ミネ ミミ ミミ メ ミミ ミネ オミ メス ミミ メ ミミ ミミ ミミ ミ メ ミミ ミミ ミミ ミミ ミミ まま 】 


HTML4.01 で 定義 され て いる 日 付 や 日 時 の 表示 方 法 は ISO8601 形式 に 準拠 し た も の で 、 以 下 の 形 式 で 
表す よう に 指定 され て いま す 。 


YYYY-MM-DDThh:mm:ssTZD 


YYYY= 年 (4 桁 ) 
MM = 月 (2 桁 ) 
DD = 日 (2 桁 ) 


hh = 時 (2 桁 プ 00 一 23) 

mm = 分 (2 桁 プ 00 一 59) 

ss = 秒 (2 桁 プ 00 一 59) 

TZD = タイ ム ゾ ー ン (Z, +hh:mm, -hh:mm) 
Z = UTC (協定 標準 時 ) 
+hh:mm= UTC より hh 時 間 mm 分 進ん で いる 現地 時 間 
-hh:mm = UTC より hh 時 間 mm 分 遅れ て いる 現地 時 間 


区 切り 文字 「T」 を 含め て 、 す べ て の 文字 を 指定 通り に 書く 必要 が あり ます 。 ま た 、am/pm で の 表示 
は 使え ませ ん の で 注意 し て くだ さい 。 
た と えば 、 日 本 (+09:00) で 2002 年 2 月 28 日 の 21 時 45 分 26 秒 を あら わす 場合 は 次 の よう に な り ま す 。 
2002-02-28T21:45:26+09:00 


ROOTETKLXKLLLKKRKRALAIRRKKKRKRKRRRKRREKRRKRXRMARXKKKKKKYKXKKKKKKKKEKRKKXKKXKKXSI】 





IE! IE5 IE5.5 IE6 NN4 NN4.7 。 NG.2 
O O O O ※ 3 O 
削除 され た 部 分 を 示し た い ドド ド ーー p6g 





テキ ボコ 


<del> て </del> 





HTML 文書 の 更新 時 に 削除 され た 部 分 は <del> タグ で 示し ます 。 

実際 の 表示 方 式 は ブラ ウザ に よっ て 異な り ま す が 、 削 除 部 分 で ある こと が わか る よう に 、 表 示 
され な いか 、 ま た は 取り 消し 線 を つけ る な ど し て 表示 され る よう 定義 され て いま す 。 法案 や 公式 
文書 な ど 変 更 履歴 が 必要 な 場合 に 、 削 除 部 分 の 目印 と し て 利用 で きま す 。 


S0URCE 
<PD> 
<del>xmp 要素 は 、HTML ドキ ュ ユメ ント の ソー ス を 記述 し た 通り に 表示 し ます 。</del> 
</D> 


! 記 胡 隊 され た 部 分 を 示し た い - Microsoft interne 
アア イル) 眞 集 ) 表示 ⑦ お 気 に 和 D ツー ル ① へ ルプ ⑪ 


GR の 回 還る の we 吉 pm20 全 の の の ・ 生還 





削除 の 理由 と 日 時 を 示す 属性 URLLKLMXSKKKKLXKKKXKK ミ EK ナミ ミ ミミ メメ ミ 】 


HTML4.01 か ら <del> タグ と 前 項 の <ins> タグ に は 、 そ れ ぞ われ 削除 ・ 追加 理由 を 記述 し た 文書 の URL 
を 指定 する cite 属性 と 、 削 除 - 追加 し た 日 時 を 表す datetime 属性 が 定義 され て いま す 。 

datetime 属性 に は 、HTML4.01 で 定義 され た 日 付 ・ 時 間 の 表記 方 式 (ISO8601 形式 : 前 項 の コラ ム 
参照 ) に し た が っ て 日 時 を 記述 し て くだ さい 。 た だ し 、 現 在 の と ころ Internet Explorer や Netscape の 
表示 で は 特に 変化 は あり ませ ん 。 





テキ 


<del cite="' datetime=" 計 ">ー</del> 
文 は 削除 し た 理由 が 記述 べ され た 文書 の URL 
広 は 削除 日 時 (ISO8601 形式 ) 


た と えば 、 以 下 の よ うに 使用 し ます 。 
<PD> 
<del dite="http://www.w3.org/TR/html4/appendix/changes.htm 
datetime="2002-02-30T21:48:30+09:00">xmp 要素 は 、HTML ドキ ュ メ ント の ソー ス を 記述 し た 通り に 表示 





し ます 。 </de> 
</P> 
' YY テイ トイ イナ て と て て て として YY LAOOKY KO 
1 
1 1 主 】 1 王 -】 IE6 NN4 NN4.7 に ルコ 
O O O O x x O 
追加 され た 部 分 を 示し た い ドー pB0 


較 2 








テ せ 中 





ILUIKAUE 1 隔 


<TubV> で </TuDV> "ルビ を ふる テキ スト 
<rt> ルビ 





ルビ つき の テキ スト を 作成 し ます 。 

<ruby> タグ と </ruby> タグ で 挟ん で ルビ を 応 る 範囲 を 指定 し 、<rt> タグ で ルビ と し て 表示 さ 
れる テキ スト を 指定 し ます 。 

な お 、 ル ビ は Internet Explorer 5 以降 で 利用 で きま す が 、 こ れ は W3C が 検討 し て いる 段階 
で Internet Explorer が 独自 に 採用 し た た めで す 。W3C で は HTML で は な く XHTML1.1 か ら 
正式 に 仕様 が 定義 され て いま す (コラ ム 参 照 )。 


<D> 

出版 元 は 

<ruby> 

株 式 会 社 翔 泳社 rt> か ぶし き が いし ゃ し ょ うえ いし ゃ 
</ruby> 

で す 。 

</P> 








午 テキ スト に ルビ を ふり た い - Microsoft Imternet Explorer 
プイ ル (E) 編集 GE) 表示 ) お 気 に 入 D@⑯ ツー ル ① ヘル プ ⑪ 


@⑨ 束 ・⑨ 回 回 人 の 妹 寺 5mcA9 春 王 の 


か ぶし ぎ き が いし ゃ し ょ うえ いし ゃ 


出版 元 は 株 式 会 社 翔 泳社 で す 。 


2 








N テキ スト に ルビ を ふり た ( い - Netscape 6 





出版 元 は 株 式 会 社交 泳社 か ぶし き が いし ゃ し ょ うえ いし ゃ で す 。 


ュ メ ント : 完 了 (018 秒 》 
人 A Netscape は 対応 し て いま せん 





し _ 


W3C に よる ルビ の 仕様 OOEKEIKK ス KK スス ミス ミス スミ トス ミス トス スス ミミ ミミ ミミ ミミ ミミ メ ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミ よ まま 】 


ルビ を 点 り た い 場 合 、XHTML1.1 か ら 正 式 に 利用 で きる よう に な っ た 仕様 に し た が っ て 記述 する と 次 
の よう に な り ま す 。 





<D> 

出版 元 は 

<ruby> 

<rb> 株 式 会 社 翔 泳社 </rb> 

<rp> (</rp><rt> か ぶし き が いし ゃ し ょ うえ いし ゃ </rt><rp>) </rp> 
</ruby> 

で す 。 

</D> 


<ruby> で ルビ を 記 る 範囲 を 指定 し 、<rb> で ルビ を ふる テキ スト を 、<rt> で ルビ テキ スト を 指定 し ま 
す 。<rp> は <ruby> に 対応 し て いな い ブ ラウ ザ に 対し 、 ル ピ 用 と し て 設定 し た テキ スト と 周り の テキ ス 
ト を 区 別 する よう 括弧 な ど を 指定 する 場合 に 使用 し ます 。 


TTYEETTYYELKLEKEEELLLKRRRSNNN れ は スス ススム スミ トミ トミ ミミ ミミ ミト ミミ ミ ミミ ミミ ミミ ミ メ ミミ メメ ミミ ミミ まま すす すま すす 


1 1] IE5.5 IE6 NN4 NN4.7 ド に ル 





メ 
O 
〇 
O 
メ 
X 
メ 





テア 員 


IEAUE) 


テ せ 由 


<blink> て </blink> 





Netscape Navigator が 独自 に 拡張 し 、Netscape Navigator で の み 有 効 だ っ た 機能 の ひと 
つ に テキ スト の 点滅 表示 を 指定 する <blink> タグ が あり まし た 。 し か し Netscape 6.2 か ら は 対 
応 し な く な り 、Internet Explorer と Netscape 6.2 で は この タグ に 挟ま れ た 内 容 は 単なる テキ 
スト と し て 表示 され る よう に な っ て いま す 。 


SO0URCE 
<D> 


<font color="#ff0000"> 


<blink>cautionll</blink> 
</font> 
</D> 








省 テキ スト を 点 減 させ た (いい - Microsoft Internet Explorer 
ファイル) 編集 GE) 表示 ) お 気に入り (⑱ ツー ル ①) ヘル プ ⑪ 


@ 放 ・ の 9 還 還 人 の 次 実り 困 


oautiorl 





^ Internet Explorer は 対応 し て いま せん 





cgautior' 


4A Netscape 6.0 まで は 対応 し て 
お り 、 点 源 表 示 が 行わ れ ま す 











※ Netscape 6.0 は 対応 し て いま す 
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テキ 中 





テバ せ 中 


<bdo dir=" 文 "> へ </bdo> 





支 eeeeeltr ( 左 か ら 右 ) 
rtl ( 右 か ら 左 ) 





テキ スト の 表記 方 向 を 指定 し ます 。 
左 か ら 右 へ 表記 する 言語 の 文書 中 に 、 右 か ら 左 へ 表記 する 言語 を 使い た い 場 合 な ど 、 前 後 の テ 
キス ト と は 異な る 表記 方 向 を 指定 する と き に 使用 し ます 。dir 属性 に つい て は p.6 も 参照 し て くだ 


さい 。 


S0URCE 


<D> 
英語 は 左 か ら 右 、 へ ブラ イ 語 (<bdo dir="rtU">HEBREW</bdo>) は 右 か ら 左 へ 書き ま 


す 。 
</P> 








/ デ 当 テキ スト の 表記 方 向 を 指定 し た い - Microsoft Imternet Explorer 


アイ ル (E) 編集 GE) 表示 お 気 に 入 D⑱ ツー ル ① ヘル プ ⑱ 








人 <bdo> タグ に 挟ま れ た 部 分 は テキ スト が 右 か ら 左 へ 表記 され ます 





1 1 IE5.5 1 ゴ :) NN4 NN4.7 ドル 
メ O O O ※ ペ O 








※ Netscape 6.0 は 対応 し て いま せん 
※ Macintosh 版 Internet Explorer 5、Netscape 6.2 は 対応 し て いま せん 


抽 有 装 本 久作 akssmiscesissssesulasuksissntissisrs pG6 





テバ 
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テバ せ 中 


70 


HTML4.01 規格 外 隔 


<marduee> や </marduee> 





この タグ に 挟ま れ た テキ スト を スク ロー ル さ せま す 。 Internet Explorer で の み 有効 で す 。 デフ 
ォ ル ト で は 、 右 か ら 左 へ ヘ テ キ スト が スク ロー ル す る 動作 を 繰り 返し ます 。Netscape Navigator 
4.7 以降 で は その まま テキ スト と し て 表示 され 、 何 も 起こ と こり ませ ん 。 


S0URCE 
<P テ > 
<marquee> デフ ォ ル ト で は 右 か ら 左 へ スク ロー ル し ます 。</marquee> 
</P> 













7 編 業 (D) 表示 ⑰ お気 に 入 D@⑯ ウー ル D ez 


の の 回 国人 の の e 宮 om20 夫 ダ の の 儲 ・ 








ー アイ ル ⑥ 母 (D 表示 ⑰ お 気 に 入 0⑳ ウー ル ① へ 2 
の 同国 人 @ の ws 吉 awo 困 デ の の っ 図 
か ら 左 ヘ へ スクロール し ます . 









テキ スト を スク ロー ル さ 世 た い - Netscape 6 





1 プ 】 1 1 た -】 1 ゴゴ NN4 NN4.7 ド に ルス 
O O O O メ し 3 9 
※ Netscape Navigator 4.0 以 前 で は <marquee> タグ で 挟ま れ た 部 分 は ブラ ウザ に 表示 され ませ ん 





テキ スト の スク ロー ル を 細か く 設 定 し た い ………… p.71 





HTML4.01 規格 外 


アキ 中 


<marquee 廊 > て </marquee> 





文 *ee< 位 置 、 動 作 、 回 数 や 時 間 、 色 な ど に 関す る 属性 





<marquee> タグ に 、 次 の 属性 を 書き 加え る と 、 ス クロ ー ル の 仕方 を さま ざま に 変化 させ る こ 
と が で きま す 。 


サイ ズ に 関す る 属性 
width=" ビ クセ ル "、 ま た は "%" (マー キー の 幅 ) 
height=" ビ ピク セル "、 ま た は "%" (マー キー の 高 さ ) 
hspace=" ビ ピク セル " (マー キー の 左右 の 余白 ) 
Vspace=" ビ ピクセル" (マー キー の 上 下 の 旋 白 ) 
width、height 属性 で スク ロー ル す る 範囲 の 幅 と 高 さ を 設定 し ます 。 ピ クセ ル 数 な ら 絶 対 的 な 
サイ ズ 、 パ ー セ ント な ら ブ ラウ ザウ ィ ン ド ウ に 対す る 相対 的 な サイ ズ に な り ま す 。 
hspace、VSDace 属性 は スク ロー ル す る 範囲 の 上 下 左右 の 余白 を 指定 し ます 。 こ ちら は ピク セ 
ル 数 の み 有効 で す 。 


動き に 関す る 属性 
behavior="scroll"、"alternate"、"siide" (マー キー の 動き か た ) 
direction="left"、"right"、"up"、"down" (スク ロー ル の 方 向 ) 
behavior 属 性 で スク ロー ル の 仕方 を 指定 し ます 。 デ フォ ルト は scroll で す 。 
scroll テキ スト が 片方 か ら 出 て き て ペー ジ を 横切る 動作 を 繰り 返す 
alternate テキ スト が スク ロー ル す る 範囲 の 片端 に くる と 、 逆 方 向 に スク ロー ル 
slide テキ スト が スク ロー ル す る 範囲 の 片端 に くる と 停止 
direction 属性 は テキ スト が スク ロー ル す る 方 向 を 決め ます 。 デ フォ ルト は 右 か ら 左 (left) の 
方 向 で す 。 


71 





テキ 中 


回 数 と 時 間 に 関す る 属性 
loop=" 回 数 "、"0"、"-1" (スク ロー ル す る 回 数 ) 
scrolldelay=" 秒 数 " ( 再 描画 まで の 時 間 ) 
scrollamount=" ビ クセ ル " ( 再 描画 まで の 距離) 
truespeed 
loop 属性 で スク ロー ル す る 回 数 を 設定 し ます 。 特に 指定 し な い 場 合 は デフ ォ ル ト の 設定 で 無限 
に スク ロー ル を 繰り 返し ます 。loop ="0"、loop="-1" を 指定 し て も 同様 に 無限 に スク ロー ル を 
繰り 返し ます 。 
scrolldelay 属性 は 、 再 描画 され る 時 間 間 隔 を 設定 する 属性 で す 。 単位 は 1/1000 秒 で 、 デ フォ 
ルト は scrolldelay="85" で す 。 こ こ で 設定 する 値 が 大 きい と 遅く 、 小 さい と 速く スク ロー ル し て 
いる よう に 見 えま す 。 た だ し 、 こ の 値 が 60 より 小さ いと き は 、truespeed 属性 (後述 ) が 指定 
され て いな けれ ば 実際 に その 間隔 で スク ロー ル さ せる こと が で きま せん 。 
scrollamount 属 性 は 再 描画 され る まで に どれ だ け 進 むか を 設定 する 属性 で す 。 ピ ビク セル 数 で 
指定 し 、 デ フォ ルト は scrollamount="6" に な っ て いま す 。 こ の 値 が 大 きい と 速く 、 小 さい と 遅 
く ス クロ ー ル し て いる よう に 見 えま す 。 
truespeed 属性 を 指定 する と 、scrolldelay 属性 で 60 より 小さ な 値 を 指定 し た と き に 、 実際 に 
その 間隔 で スク ロー ル さ せる こと が で きま す 。 こ の 属性 を 指定 し な いと scrolldelay 属性 の 値 が 
60 より 小さ く て も 60 と し て 和 負 理 され ます 。 


色 に 関す る 属性 
bgcolor="#rrggbb"、"colorname" (マー キー の 背景 色 ) 
スク ロー ル す る 範囲 の 背景 色 を 設定 し ます 。 色 指 定 値 ( 打 rggDb) か 、 色 名 (colorname) で 
指定 し ます 。 


<center> 
<D> 


<marquee width="75%" behavior="scroll" direction="right" 


scrolldelay="100" scrollamount="20" loop="3" bgcolor="red"> 
左 か ら 右 へ スク ロー ル 

</marduee> 

</P> 

</center> 














「 ョ テキ スト の スク ロー ル を 細か が 《 誠 定 し た い - Microsoft Internet Explorer 
アカ イル) 編集 表示 ) お 気 に 和 DQ) ツー ル ① ヘル プ ⑪ 


@・9 思 の em 家 ぁ mcAp な の @G あぁ 回 ・.』 





テ 村 中 





潮 テキ スト の スク ロー ル を 細か く 訪 定 し た い - Micrpgoft Internet Expjorer 
アイ ル F) 編集) 表示 お 気 に 和 DO ツウ - ル ① へ ルプ ⑪ 


GO ・ の 回 国人 の の we 誠 pmoo 奉 の の 人 ら 等 回 


色 テキ スト の スク ロー ル を 細か 計 定 し た い - Microsoft Internet Explorer 
アイ ル ( 上 編集 (D 表示 お気 に 入 D@ ウツ - ル D ん ルプ ⑪ 


GR の 回 還る の ws 京 pwoo 人 S ダ 7 の G・ あ 回 ・ 自 








人 <marquee> タグ の 台 種 の 属性 に し た が っ て テキ スト が スク ロー ル し ます 








内 テキ スト の スク ロー ル を 細か ( 謗 定 し た い - Netecape 6 
|。 アイ ル ( 編集 表示 検索 ジャ ンプ ⑬ ブックマーク 2(⑧) 222D ヘル プ ⑪ 


[SS he/7mwmw shoeishacom/book/pc//taedic/ 02text/ext19jhtml 
大 ーー ーーーーー ーー ュー 


左 か ら 右 へ スク ロー ル 














1】 1 NN4 ドド し 守 4 に ルイ 
O O ※ 2 に 3 
キス ト を スク ロー ル さ せ た い …ーーーーーーー… p70 
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( 
1 リコ ヨコ ミコ の 1 コリ 賠 







育 景色 を 指定 し た い 


<body bgcolor=" 文 "> て </bodV> 





ペ 
』 
レス 






丸 *eees 色 指定 値 (#rrggbb)、 ま た は 色 名 (colorname) 


<body> タグ の bgcolor 属性 で ペー ジ の 背景 色 を 指定 し ます 。 色 の 指定 に は 、「# の あと に 


rgb の 値 を 16 進数 で 記述 する か 、 直 接 色 名 (colorname) を 書き 込み ます 。 
色 の 指定 が され て いな い 場 合 に は 、 ユ ー ザ ー の ブラ ウザ の 設定 に し た が っ て 背景 色 が 表示 され 


ます 。 


<body bgcolor="maroon"> 


<PD> 

<font size="4"> 背景 に maroon を 指定 し て いま す 。</font> 
</P> 

</bodV> 




















74 背景 色 を 指定 し た い 


HTML 文書 で 色 を 指定 する に は 、 次 の 2 つの 方 法 が あり ます 。 た だ し 、HTML で 色 を 指定 する 方 法 は 
非 推奨 (deprecated) と され 、 代 わり に スタ イル シー ト を 利用 する よう 推奨 され て いま す 。 


人 @ 色 指定 値 (rrggbb) 一 一 16 進数 で 指定 

「 提 に 続け て 、 赤 (r)、 緑 (9)、 青 (b) の 値 を 00 一 ff の 16 進数 計 6 桁 表 し ます 。 た と えば 、 黒 を 
指定 する 場合 に は 「#000000] と な り ま す 。 各色 の 指定 値 に つい て は 付録 p.340 一 343 を 参照 し て くだ 
さい 。 


介 色 名 (colorname) 一 一 色 の 名 前 で 指定 
色 名 で 直接 指定 し ます 。 大 文字 と 小文字 は 区 別 さ れ ま せん 。HTML4.01 で は 以下 の 基本 的 な 16 色 が 定 
義 さ れ て いま す 。 








0 :navy #O00080 油 ireen 


purple #800080 





ECOUUEEUOUUUUWN 上 記 記 いり いい 


bgcolor="#000000" と bgcolor="Dblack" は 同じ 表示 結果 に な り ま す 。 
ブラ ウザ に よっ て 独自 に 定義 され 、 一 般 的 に 表示 可能 な 色 名 も あり ます が (付録 D.344 参照 )、 環 境 に 
よっ て は 意図 し た 色 を 表現 で き な い こと も ある の で 注意 が 必要 で す 。 


CCCYYYIINKYKYXKKKYRXKKXILLKLKLRRLKX ス スス ミミ ミミ ミト スミ スス ミミ トス ミス ミス スミ ネス メス ネム スミ ネス ミネ メメ ミミ ミミ まま まま まま まえ え 】 


CSS に よる 背景 色 の 指定 エエ ミミ スト ミミ ミミ スミ スミ ミミ トミ トス ミミ ミミ ミミ トミ ミス ミミ スミ トミ ミミ ミミ ミミ ミオ ミミ ミミ ミミ ミミ メメ 】 


スタ イル シー ト を 利用 し て 同様 に 背景 色 を 指定 する 場合 は 次 の よう に な り ま す 。 スタ イル シー ト に つい 
て 詳し く は 本 書 姉妹 書 「 ス タイ ル シ ー ト 生 典 第 3 版 」 を 参照 し こく だ さい 。 


<style type= "text/css"> 
body {background-color:green} 





</style> 
1 1 三 】 IE5.5 IE6 NN4 ドド し 完 4 に ルコ 
O O O O O O O 
PT 背景 に 画像 を 設定 し た い ドド ドド ドド p.76 
牧 ア テキ スト の 色 を 指定 し た い ーーー ドド ーー pBo 
背景 色 を 指定 し た い 





75 














2 和 S ココ: の I コ リ 


<body backqground=" 太 "> て </body> 








丸 *weees 画 像 ファ イル 名 (URL) 





ペー ジ の 背景 に 画像 を 使う 場合 は 、<body> タグ の background 属性 で 使用 する 画像 ファ イ 
ル を 指定 し ます 。 読み 込ん だ 画像 は 連続 し て タイ ル 状 に 表示 され 、 部 分 的 に 表示 し た り 途 中 か ら 


設定 を 変更 する こと は で きま せん 。 
背景 画像 で すか ら 、 サ イズ の 大 き な 重 い 画像 ファ イル は な る べく 避け た ほう が よい で し ょ う 。 


<body background="cat1.gif"> 

<D> 

<font size="4"> 背景 に 画像 を 使っ て いま す 。</font> 
</P> 

</body> 





ロ 
午 昔 景 に 画像 を 設定 し た い - Microsoft Internet Explorer 


プア イル (FE) 編集 表示) お 気に入り D⑱ ツー ル ① ヘル プ ⑱⑬ 


ウロ の | のみ eew cc の 


3 移る る 
天 イン ター ネッ ト 














IN Ri 背景 に 画像 を 該 定 し た い - Netscape 6 


ドキ ュ メル ルト: 完了 (014 秒 》 














人 背景 に 指定 し た cat1.gif 


トナ 放さ) し も oraAt ij 1 EETKETTKKKRKK ス KK スス スミス ミミ ミミ ミミ ミミ トミ トス スミ スミ ミミ ミミ スミ ミミ ミミ ミミ ミミ ミス スミ ます 】 


背景 に 画像 を 使う 場合 、 画 像 に 合わ せ て テキ スト の 色 も 変更 する こと が あり ます (Dp.80 参照 。。 し か し 
背景 画像 の 表示 に 時 間 が か か っ た り ユ ー ザ ー が 画像 を 表示 し な いよ う 設 定 し て いる と き な ど に 、 指 定 し た 
色 に よっ て は テキ スト が 読め ゆな いこ と も あり ます 。 こ うし た 状況 も 考え て 、 同 時 に bgcolor 属性 で テキ ス 
ト が 読み や すい 背景 色 も 設定 し て お いた ほう が よい で し ょ う 。 


PKKIKIKTKKTKXX は KKK ナ ミミ スミ メル ミル 】 ROOTELELKLKKLKRKIRRLKLXRRRRKR ス スス ミミ ミスミ ミスミ トメ トメ 】 


CSS に よる 背景 画像 の 指定 MLCCCCCCCCLLLLLKK た に POORENK エ ミミ ミミ ミミ ミミ ミミ よ ミミ 


スタ イル シー ト を 利用 し て 同様 に 背景 画像 を 指定 する 場合 は 次 の よう に な り ま す 。 スタ イル シー ト に つ 
いて 詳し く は 本 書 姉 妹 書 「 ス タイ ル シ ー ト 生 典 第 3 版 』」 を 参照 し て くだ さい 。 


<style type="text/css"> 
body {background-image:url("bg1.gif)} 
</style> 


1 1 二 】 IE5.5 1 ゴゴ NN4 NN4.7 N6.2 
O O O 9) O O O 





参照 背景 色 を 指定 し た い … ド ドド ーーー ドー ドー p.74 背景 画像 を 固定 し た い ・… パ (パト ピー ドド ドド p.78 
テキ スト の 色 を 指定 し た い ……… パ ドド ドド ーー p.80 











LUIERUE ) 7 隔 








育 景 画像 を 固定 し た い 


<body background=" 文 " bgproperties="fixed"> て </body> 





支 *eees 画 像 ファ イル 名 (URL) 






ツー ス > 


通常 、 ブ ラウ ザ 画 面 を スク ロー ル す る と 背 景 画像 も 一 緒 に スク ロー ル し ます 。 
た だ し 、Internet Explorer 3 以降 で は 、bgproperties="fixed" を 指定 する と 、 背 景 画像 は 固 
定 さ れ て スク ロー ル し な く な り ま す 。 


<body background="4birds.jpg" bgproperties="fixed"> 

<D> 

<nobr> 

<font size="4">bgproperties=*fixed" を 指定 する と 、 ブ ラウ ザ の 画面 を 上 下 左右 の いずれ 
に スク ロー ル し て も 背景 画像 は 最初 に 表示 され た 状態 の まま 動か な く な り ま す 。</font> 
</nobr> 

</P> 

</body> 











78 背景 画像 を 固定 し た い 






アア イル 生業 ⑰ 表示 ⑰ お 気に入り ⑯ ウー ル D へ ルプ 0⑰ 
の の の の 二 5mo 遇 ケ ワ 6 3- = 回 ・J 























CSS に よる 背景 画像 の 固定 た ルオ ミミオ オミ ミネ ミミ ミミ エエ ミオ ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミス SS 上 IIIMRSIS】 


スタ イル シー ト を 利用 し て 同様 に 背景 画像 を 固定 する 場合 は 次 の よう に な り ま す 。HTML タグ の 
bgproperties 属性 は Internet Explorer の 独自 拡張 で Netscape (Navigator) で は 無視 され ます が 、 ス タ 
イル シー ト で の 指定 は Netscape 6 で も 有効 で す 。 ス タイ ル シ ー ト に つい て 詳し く は 本 書 姉 妹 書 「 ス タイ 
ル シ ー ト 秋 典 第 3 版 」 を 参照 し こく だ さい 。 


<style type="text/css"> 
body {background-image:url("4birds.jpg"): 
backgqround-attachment:fixed1 





</style> 
1 1 IE5.5 1 コー NN4 NN4.7 に ルス 
O O O O メ メ X 
参照 背景 色 を 指定 し た いい tt ドド ドド ドド ドド ドー PD.74 テキ スト の 色 を 指定 し た い バド ドド ーー… p.80 
し 背景 に 画像 を 設定 し た い ーー p.76 











「 | 1 ロコ DEPRECATED 図 
テキ スト の 色 を 指定 し た い 
<body text=" 文 "> や </bodV> 

<body ink=" 文 "> て </bodV> 


<body alink=" 文 "> て </body> 
<body viink=" 太 "> て </bodV> 








支 wees 色 指定 値 (#rrggbb)、 ま た は 色 名 (colorname) 






全体 の テキ スト や リン ク 部 分 の テキ スト の 色 を 指定 し ます 。 
text 標準 の テキ スト の 色 を 指定 
ink まだ 見 て いな い ( キ ャ ッシュ され て いな い ) ペ ー ジ ヘリ ンク し て いる 部 分 の 色 を 指定 
alink リンク 部 分 を 選択 し た 瞬間 (クリ ッ ク な ど ) の 色 を 指定 
vlink すでに 見 た (キャ ッシュ され て いる ) ペー ジヘ リン ク し て いる 部 分 の 色 を 指定 
色 の 指定 に は 、# の あと に rgb の 値 を 16 進数 で 記述 する か 、 直 接 色 名 (colorname) を 書き 
込み ます 。 色 の 指定 方 法 に つい て は p.75 を 参照 し て くだ さい 。 
色 の 指定 が され て いな い 場 合 に は 、 ユ ー ザ ー の ブラ ウザ の 設定 に し た が っ て 表示 され ます 。 


<body bgcolor="silver" text="#ff0000" ink="#0000ff" atink="fuchsia" 
vlink="qreen"> 

<D> 

<font size="4"> 

標準 の テキ スト は 赤 <br> 

<a href="Hink1.html"> まだ 見 て いな い ペ ー ジ へ の リン ク は 青 </a><br> 
<a href="Hink2.html"> 選択 され た リン ク は 紅 紫 </a><br> 

<a href="Hink3.html"> すでに 見 た ペー ジ へ の リン ク は 緑 </a><br> 

に 設定 し て み ま し た 。 

</font> 

</D> 

</bodV> 











80 テキ スト の 色 を 指定 し た い 


当 テキ スト の 色 を 指定 し た い - Microsoft Internet Explorer 


アイ ル (E) 編集 表示 お気 に 入 DO ツー ル ① ヘル プ ⑪ 


の 回 国人 の の 時 均 5m29 和 ケ の の は ・ 


- キ スト は 赤 
いな い ペ ー ジ へ の リン ク 


の イン ター ネッ ト 








NN テキ スト の 色 を 指定 し た い - Netscape 6 


。 アイ ル (F) 編集 (E) 表示 び ) 検索 ⑤ ジャ ンプ ⑯) ブッ クマ ー ク B) が D ヘル プ ⑪ 


0 人 open 














属性 と その 値 は 複数 を 並べ て 書く こと が で きま す 。 複数 ある 場合 、 そ の 順序 は 問い ませ ん 。 


DOORKKLKIRIAARREKLKLKAKLRRIRRRRRLKRLKIAIARRKRLXRLKRRRIRRKIRRRRRRYRR 


CSS に よる テキ スト の 色 指 定 エエ エエ メオ ミミ ミミ ミミ ミミ ミ ドド KKKKIKEYAIKKKLMREKKSSSKSXAXS】 


スタ イル シー ト を 利用 し て 同様 に デキ スト の 色 を 指定 する 場合 は 、 一 例 と し て 次 の よう に な り ま す 。 ス 
タイ ル シ ー ト に つい て 詳し く は 本 書 姉妹 書 「 ス タイ ル シ ー ト 秋 典 第 3 版 」 を 参照 し てく だ さい 。 














<style type= "text/css"> 

body {background-color:silver: 
color:#ff0000} 

ailink {color:#0000ffH 

aactive fcolor:fuchsia+ 

a:visited {color:qreen} 

</style> 


POOLEIEAKIRRRKAKRLIARALKKAKRKXXALXRRRRRLXRXKXRRXAXRARXXRXRRRRTRARRRRRRRRRRR 





1】 1 1 1 コガ NN4 NN4.7 トル 
O O O O O O O 
参照 背景 色 を 指定 し た い バ パ バー ドド ドド ドー ドー D.74 テキ スト の 色 を 部 分 的 に 指定 し た い ・……………・ p.8g 
背景 に 画像 を 設定 し た い バド バー ドド ーー ドー p.76 


テキ スト の 色 を 指定 し た い 81 


テキ スト の 色 を 部 分 的 に 指定 し た い 


<font color=" 友 "> て </font> 










太 weee< 色 指定 値 (#rrggbb)、 ま た は 色 名 (colorname) 





指定 し た 範囲 の テキ スト の 色 を 変更 し ます 。 色 の 指定 に は 、「#] の あと に rgb の 値 を 16 進数 
で 記述 する か 、 直 接 色 名 (colorname) を 書き 込み ます 。 色 の 指定 方 法 に つい て は p.75 を 参照 
し て くだ さい 。 

<body> タグ の text 属 性 で テキ スト の 色 を 指定 する 場合 は 文書 全体 に 対し て 有効 に な り ま す が 
(前 項 参照 )、<font> タグ の color 属 性 で は 、 タ グ に 挟ま れ た 部 分 に の み 有 効 に な り ま す 。 





<body bgcolor="#000000"> 

<D> 

<font color= "#cOcOc0"> テ </font> 
<font color="#808080"> キ </font> 
<font color="#ffffff"> ス </font> 
<font color= "#800000"> ト </font> 
<font color="#ff0000"> の </font> 
<font color="#800080"> 色 </font> 
<font color="#ff00ff"> を </font> 
<font color="green "> 変 </font> 
<font color="lime"> 更 </font> 
<font color="olive"> し </font> 
<font color="yellow"> て </font> 
<font color="navy"> み </font> 
<font color="blue"> ま </font> 
<font color="teal"> す </font> 
<font color="aqua">。</font> 
</D> 

</body> 











82 テキ スト の 色 を 部 分 的 に 指定 し た い 


当 テキ スト の 色 を 部 分 的 に 指定 し た い - Microsoft Imternet Explorer 回 回 四 
アイ ル ⑥) 編集 CE) 表示 ) お 気に入り (⑳ ツー ル ① ヘル プ ⑬ 





⑨ 京 ・⑨ 還付 の 嘉 5%cA9 軸 な の の ) 氏 ・ 





| 
| 
| 
| 





慌 テキ スト の 色 を 部 分 的 に 指定 し た い - Netscape 6 alIE4 ピス 
。 アイ ル (F) 編集 E) 表示 (Y) 検索 ⑤ ジャ ン ブ (⑬) ブッ クマ ー ク (8) 22① ヘル プ ⑪ 


、GJ@⑨ ⑨ @⑲ Orenccovcco] 回 還 さ %o 





ドキ ュ メ ント : 売 了 (018 秒 ) 





CSS に よる テキ スト の 色 指 定 KK ミミ ミミ メメ ミミ) TXXKXAYX OAIKRKKYXAKXRRRKKXX CXY】 


スタ イル シー ト を 利用 し て 同様 に ビデ キス ト の 色 を 部 分 的 に 指定 する 場合 は 、 一 例 と し て 次 の よう に な り 
ます 。 ス タイ ル シ ー ト に つい て 詳し く は 本 書 姉 妹 書 「 ス タイ ル シ ー ト 辞典 第 3 版 」 を 参照 し こく だ さい 。 


<style type="text/css"> 

body {backqround-color:#000000} 
.Durple {color:#800080} 

.fuchsia {color: 尋 00ff} 


.qreen {color:qreen] 
-hme {color:lime} 
</style> 

<body> 

<PD テ > 


<Span class="purple"> 色 </span><span class="fuchsia"> を </span> 
<Span class="qreen"> 変 </span><span class="lime"> 更 </span> 
</D> 

</body> 


1】 1 1 王 誠 】 1 NN4 NN4.7 に ル 4 









0 色 を 指定 し た い テキ ギド の 色 夫 指定 必 だ だ eeee22008eedees p80 
アア 背景 に 画像 を 設定 し た い 


テキ スト の 色 を 部 分 的 に 指定 し た い 83 


| リコ ヨコ ミコ の 9 コリ 隔 







<h aign=" 六 "> ン </h> 





支 eeeeee1 6 
之 seeeeele 人 、center、right 





<h> タグ に align 属性 を 指定 する と 、 見 出し の 表示 位置 を left ( 左 揃え アデ フォ ルト )、center 
(セン タリ ング )、right ( 右 揃え ) の いずれ か に 指定 する こと が で きま す 。 


<h1 align="left"> 見 出し : 左 揃え </h1> 


<h3 align="center"> 見 出し : セン タリ ング </h3> 
<h5 align= "right"> 見 出し : 右 揃え </h5> 








84 見 出し の 位置 を 指定 し た い 





当 見 出し の 位置 を 指定 し た いい - Microsoft Imternet Explorer 
アイ ル F) 編集 E) 表示 お 気に入り D⑯ ツー ル ① へ リル ブ ⑱⑪ 


@s・ の 6 回 還る の 団 吉 mop 仙 セ の の 人 ・ 史 の 


見 出し : 左 摘 え 


見 出し : セ ンタ リン グ 








見 出し の 位置 を 指定 し た いい - Netscape 6 


| 見 出し : 左 揃え 


見 出し : セ ンタ リン グ 











CSS に よる 見 出し の 位置 指定 ミス スミス ミ 】 エナ メメ オミ オミ ド KKKALXKAKKKKEAERIRERRRKKKRLYEXI 


スタ イル シー ト を 利用 し て 同様 に 見 出し の 位置 を 指定 する 場合 は 、 一 例 と し て 次 の よう に な り ま す 。 ス 
タイ ル シ ー ト に つい て 詳し く は 本 書 姉妹 書 「 ス タイ ル シ ー ト 箇 典 第 3 版 」 を 参照 し て くだ さい 。 





<Style type="text/css"> 
ht ttext-align:left} 
h3 {text-align:centerl 
h5 ttext-aiign:right} 
</style> 


COCOLIKKEKXXKXAXAAKLKXKXSI POCKETKYYYXYY PCESIIYKRRKEKRXYJ HELLKXYY 


1 1 王 】 IE5.5 1 ヨゴ NN4 MC 完 4 N6.2 
O O O O O O O 





見 出 じ を 設定 し た し) …… に の トド ーー ドニ ーーー ド 2e に っ DS ゼ セ ジ ダリ ッ グ だ UM eyikzcwssavsolgsrdgdyeadisdgik で ska p80 
まとめ て 位置 を 指定 し た い … バ ドー ドー ドー p.88 





リヨン ェ コ の 9 コリ 





段落 の 位置 を 指定 し た い 


<D align=" 友 "> て </D> 












太 eeeeeele 人 t、center、right 





<p> タグ に align 属性 を 指定 する と 、 段 落 の 位置 を left ( 左 揃え アデ フォ ルト )、center (セン 
タリ ング )、right ( 右 揃 え ) の いずれ か に 指定 で きま す 。 


<P align="left"> 段落 の 左 揃え </p> 
<P align="center"> 段落 の セン タリ ング </p> 
<P align= "right"> 段落 の 右 揃 え </p> 





用 段落 の 位置 を 指定 し た い - Microsoft Internet Explorer 


アイ ル (E) 編集 (C) 表示 お 気 に 入 D@⑩ ツー ル ① ヘル プ ⑪ 


⑳ 京 ・ の 図 回 の の 寺 5mA9 界 の @ 人 師 
段落 の 左 揃え 


段落 の セン タリ ング 
段落 の 右 揃え 











86 段落 の 位置 を 指定 し た い 


RS 段 苦 の 位置 を 指定 し た 【 Netscape 6 


段落 の セン タリ ング 











CSS に よる 段落 の 位置 指定 トス オオ ネエ ミオ オミ ミミ ミミ オミ メメ SIIEILEKKIEYRERRIEKRKERKRKKKRRXR】 


スタ イル シー ト を 利用 し て 同様 に 見 出し の 位置 を 指定 する 場合 は 、 一 例 と し て 次 の よう に な り ま す 。 ス 
タイ ル シ ー ト に つい て 詳し く は 本 書 姉妹 書 「 ス タイ ル シ ー ト 酵 典 第 3 版 」 を 参照 し こく だ さい 。 


<style type="text/css"> 


ieft {text-align:left} 
#Center {text-align:centerl 
jright {text-align:nght} 
</style> 

<body> 


<P id="left"> 段 落 の 左 揃え </p> 

<D id="center"> 段 落 の セン タリ ング </p> 
<P id="right"> 段 落 の 右 揃 え </p> 
</body> 


KTXAIKTTYLLEKEKALALALAAKIKISELKINXAIKKIEIKKLKKKIRKRRKIKKKKXKRKRRKRKEKRRKRRRKRKEKRKKYYYI 





IE4 IE5 [ 王 遇 3 NN4 NN4.7 N6.2 
O O O O O O O 
参 昭 段落 を 設定 し た U こ に に ドド ドド ドド oo pi40 セン タリ ジグ し た 0 に に eeeeeeeeeeeeeeet p.90 
人 ”。 まとめ て 位置 を 指定 し た い ーー ドーーー pB8 





ヨコ コワ -Y』 コ ヨリ 隔 


<div align=" 文 "> で </diV> 





文 *eeeeeleft、center、right 





<div> タグ で 囲む と 、 囲 まれ た 範囲 が ひと まとまり と され ます 。 こ れ に align 属性 を 記述 する 
と 、 中 の コン テン ツ の 表示 位置 を left ( 左 揃え ン デ フォ ルト )、center (セン タリ ング )、right 
( 右 揃え ) の いずれ か に 指定 する こと が で きま す 。 





<div align= "left">&lt:div&nbspzalign=""&qt: で は <br> 
指定 し た 範囲 を ひと まとめ に し て <br> 

位置 の 指定 が で きま す 。</div><br> 

<div aliqgn="center">&ltdiv&nbspzalign=" 廊 "&qt: で は <br> 
指定 し た 範囲 を ひと まとめ に し て <br> 

位置 の 指定 が で きま す 。</div><br> 

<div align= "nght">&lt:div&nbspzalign=""&gt: で は <br> 
指定 し た 範囲 を ひと まとめ に し て <br> 

位置 の 指定 が で きま す 。</div> 














Ez で 表示 ⑰ お 気 に 入 0 ウー ル D へ M プ ゆ * 
Os の 6 人 の 6 の wm 京 pmoo の デ の の 
く div align=” 真 "> で は 


指定 し た 範囲 を ひと まとめ に し て 
位置 の 指定 が で きま す 。 


<div align=" 契 "> で は 
指定 し た 範囲 を ひと まとめ に し て 
位置 の 指定 が で きま す 。 


<div align=" 真 "> で は 
指定 し た 範囲 を ひと まとめ に し て 
位置 の 指定 が で きま す . 





liv ali 大 > 
Wig 感 を ひと まとめ に し て 
位置 の 指定 が で きま す . 


<div ali > で は 
拉 定 し た 細 開 を り と まとめ (に し て 
位置 の 指定 が で きま す 。 


<div align=" 真 > で は 
指定 し た 範囲 を ひと まとめ に し て 
位置 の 指定 が で きま す . 








CSS に よる まとまっ た 範囲 の 位置 指定 し た まま スエ オス まま オミ ミミ ミス ミミ ミミ ミス ミミ ミミ ミミ メメ ミス ミミ ミミ メメ ミミ スス 】 


スタ イル シー ト を 利用 し て 同様 に まとまっ た 男 囲 の 位置 を 指定 する 場合 は 、 一 例 と し て 次 の よう に な り 
ます 。 ス タイ ル シ ー ト に つい て 詳し く は 本 書 姉妹 書 スタ イル シー ト 環 典 第 3 版 」 を 参照 し て くだ さい 。 


<style type="text/css"> 

eft {text-align:lef 

#Center {text-align:center} 

ight {text-aign:rnght] 

</style> 

<body> 

<div id="left"> ま と まっ た 範囲 の <br> 位置 指定 </div> 
<div id="center"> ま と まっ た 男 囲 の <br> 位置 指定 </div> 
<div id="right"> ま と まっ た 範囲 の <brz 位置 指定 </div> 
</body> 


CCNAAAKAXALKAKKKRAKLKKRKIRKKKRKYKKRRRRRRKREKEKKKKRRRKRKRKKKKKKKKEKEEEKKLKKKKKMEEK こ ここ 


1 マズ 】 1 1 王 基 】 1 ヨゴ NN4 NN4.7 山北 1 
O O O O 1@) O O 





特定 の 範囲 を 設定 し た い ーーーーーーーー p.36 段落 の 位置 を 指定 し た い 
見 出し の 位置 を 指定 し た い ーーーーーーーー… BB 人 セ ジ クリ ジグ だ 05*visatca snsaeaivsssaei N 














ーー 
1 リコ ヨコ ミコ の コリ 了 同 







セン タリ ング し た い 


<center> </center> 


コン テン ツ の セン タリ ング (中 央 揃え ) を 指定 し ます 。 











<center> 
<D テ > 
セン タリ ング 

</D> 

<D> 

<imq src="cat.gif" width="120" height="120" alt=""> 
</D> 
</center> 








セン タリ ング し た い 


アン 等 セン タリ ング し た ( い ) - Microsoft Internet Explorer 
アイ ル (E) 編集 人 ぼ ) 表示 W) お 気 に 入 D@⑳ ツー ル ① ヘル プ ⑪ 


GO の 回 還 人 の の ws 宮 pmo 時 ガ の @ 折 - 和 回 ・ の 


| 


* 王 > 


\ 





の イン ター ネッ ト 


人 る テキ スト や 画像 が セン タリ ング され ます 








タン タリ ン が したい - Netscape 6 


セン タリ ング 





人 テキ スト や 画像 が セン タリ ング され ます 


< く center> と <div align='center"> し オス オオ ミエ メオ ミミ ミネ メオ オミ ミミ ミミ ミミ ミミ ミス ミミ ミミ ミミ まま 】 


<center> タグ は 前 項 の <div align="center"> の 略記 法 の た め 、<div align="center"> と 同様 の 効果 
が 得 ら れ ま す 。 し か し 、<center> タグ も align 属性 も 推奨 し な い タ グ や 属性 (deprecated) と され て い 
ます の で 、 で きる だ け ス タイ ル シ ー ト を 使用 し た ほう が よい で し ょ う 。 


DOORYRRRKAAALRRRRRRLELRRARRRRRRRRRRRRRRRKRRKKKRRRRRRRRRRKKRKEKTKI 











1 1 主 】 IE5.5 1 ヨミ ガ NN4 4 N6.2 
O O O O O O O 


参照 見 出し の 位置 を 指定 し た い 
の 段落 の 位置 を 指定 し た い ーーーーーーー 1 








の 





92 






10 認 丁 
横 野 線 を 表示 し た い 


<hr> 
<hr 文 > 


し 4 た 3 ct3 り ココ ュ ココ コリ 隔 










娘 *eeeeeSize=" 太 ささ "(ビク セル ) 
width=" 長 さ " (ピク セル また は %) 
align="left"、"center"、"right" 

noshade 






<hr> で 横 暑 線 が 画面 の 左右 いっ ぱい に 表示 され ます 。 横 箸 線 と その 前 後 の 内 容 と の 間隔 は 、 ブ 
ラウ ザ に 依存 し ます 。 

横 夏 線 の 太 さ や 長 さ な ど を 指定 する に は 、 次 の 属性 を 設定 し ます 。 

Size 属性 は 肝 線 の 太 さ を ピク セル で 指定 し 、width 属性 は 長 さ を ピク セル か 画面 の 横幅 に 対す 
る 割合 (%) で 指定 し ます 。 

align 属性 で は 左右 に 寄せ る か 、 セ ンタ リン グ す る か を 決め ます が 、 デ フォ ルト で セン タリ ング 
する 設定 に な っ て いる た め 、center は 省略 可能 で す 。 

noshade を 指定 する と 、 立 体 的 で は な く 平 面 的 な 横 肝 線 が 表示 され ます 。 





<body bgcolor="#ff6699" text="#TfFFfff"> 

<P> 指定 な し の デフ ォ ル ト だ と こん な 感じ 。</P> 

<hr> 

<P> 線 の 太 さ を 8 ピク セル に 指定 し まし た 。</P> 

<hr size="8"> 

<P> 線 の 長 さ を 50 ピク セル に 指定 し まし た 。</P> 

<hr width="50"> 

<Pz> 線 の 長 さ を 画面 の 横幅 に 対し て 50% に 指定 し まし た 。</P> 
<hr width="50%"> 

<P> 線 の 大 さ を 8 ピク セル 、 長 さ を 画 面 の 横幅 の 50%、 そ し て 左寄せ に 指定 し まし た 。</P> 
<hr size="8" width="50%" aign="left"> 

<P> 影 の な い 、 一 本 の 線 に 指定 し まし た 。</D> 

<hr noshade> 

</bodV> 











横 軒 線 を 表示 し た い 





カイル) 経 案 D 表示 お 気 に 和 AD⑯ ウ - ル CD へ ルフ 半 
ア ②・⑨ 引 人 ぬ の ws 支 5m ら 9 届 の の 人 還 ・ 





| バー ジ が 表示 Sh まし た の インタ ーネット 




















1 子 】 1 ミコ 1 王 基 -】 1 ココ NN4 NN4.7 に ルコ 
O 〇 O O O O O 


| # フ 横 夏 線 の 色 を 指定 し た い …・ 








・p.94 


横 肝 線 を 表示 し た い 93 





11 
横 肢 線 の 色 を 指定 し た い 


<hr color=" 文 "> 





HTML4.01 規格 外 隔 










支 *eeees 色 指定 値 (#rrggbb)、 ま た は 色 名 (colorname) 





色付き の 横 夏 線 を 表示 し ます 。 色 の 指定 に は 、「#] の あと に rgb の 値 を 16 進数 で 記述 する か 、 
直接 色 名 (colorname) を 書き 込み ます 。 色 の 指定 方 法 に つい て は p.75 を 参照 し こく だ さい 。 
Internet Explorer の み 対 応 し て いま す 。 





<D align="center"> 

色付き の 横 暑 線 は Intenet Explorer の み 対 応 し て いま す 。 
</D> 

<hr color="aqua"> 

<hr color="#ffOOff"> 





94 横 肝 線 の 色 を 指定 し た い 












和 橋 守 紀 の 色 を 指定 し た い - Microsoft internet Explorer 5 | 阿 


アア イル) 編集 D 表示 W) お 気に入り (⑱ ウー ル ①D ヘル プ ⑬ 
@*・ の 回 の の 誠 pm0 侍 ケ の の は - 圭 回 ・ 
色付き の 模 野 線 は Intemet Explorer の み 対 応 し て いま す 。 











色付き の 横 肢 線 は Intemet Explorer の み 対応 し て いま す 。 








人 ^ Netscape は 対応 し て いま せん 








1 1 1 主計) 1 ミコ NN4 NN4.7 ド が に ルオ 
O O O O 2 X X 
横 夏 線 を 表示 し た い ドド ドド ツー p.92 





ペー ジ の マー ジン を 指定 し た い 


<body 娘 > て </body> 











文 eeseeeleftmarqgin=" ビ クセ ル " 
topmargin=" ビ クセ ル " 

rightmargin=" ビ クセ ル " 

bottommargin=" ビ ピクセル" 









ペー ジ の 上 下 左右 の マー ジン (余白 ) 幅 を 設定 し ます 。 Internet Explorer 6 の デフ ォ ル ト は 左 
右 が 10 ピク セル 、 上 下 が 15 ピク セル で す 。 leftmargin (topmargin) に 0 を 指定 する と 、 左 
(上 ) 端 に 揃い ます 。 

leftmargin 属性 で 左右 の マー ジン 、topmargin 属性 で 上 下 の マ ー ジ ン が 設定 され る の で 、 
rightmargin 属性 と 、bottommargin 属性 は 、 主 に 左 と 右 、 ま た は 上 と 下 で 異な る マー ジン を 設 
定 する 場合 に 指定 し ます 。 

Internet Explorer の み 対 応 し て いま す 。 


<body leftmarqin="80" topmargin="55"> 


SD> 

この ペー ジ の マー ジン は 、 左 が 80 ピク セル 、 上 が 55 ピク セル で す 。 
</P> 

</bodV> 








96 ペー ジ の マー ジン を 指定 し た い 


' 馬 


公 ペー ラジ の マー ジン を 指定 し た いい - Mjcrosoft Internet Explorer 


アイ ル F) 編集 E) 表示 () お 気 に 和 D(⑯ ツー ル ヘル プ ⑪ 
@ 系 ・ の 6 回 還 人 の の we 支 5mo 仙 ケ の の 人 
・ 国 5 


ャ Y 
還 この ペー ジ の マー ジン は 、 左 が 80 ピ クセ ル 、 上 が 55 


画 較 還 ビ クセ ル で す 。 





し ラオ リ に た ジル ルネ かり: Ne e 6 
。 アイ ル (E) 編集 E) 表示 ( び ) 検索 G) ジャ ンプ ⑥) ブッ クマ ー カ (B) 2 が (①D ヘル プ ゆ 





122 > ンー ニラニー ロー os 


この ペー ジ の マー ジン は 、 左 が 80 ビ クセ ル 、 上 が 55 ピ クセ ル で す 。 


4 Netscape は 対応 し て いま せん 





に 


CSS に よる マー ジン の 指定 ミス トミ ミミ トス ミミ ミミ ミス ミミ ミスミ ミミ ミミ ミミ ミスミ ミミ ミ ス メス ミミ ミミ ミスミ メ ミスミ ミ ミス スミ メス ミミ 】 


スタ イル シー ト を 利用 し て 同様 に マー ジン を 指定 する 場合 は 、 一 例 と し て 次 の よう に な り ま す 。 ス タイ 
ル シ ー ト に つい て 詳し く は 本 書 姉 妹 書 「 ス タイ ル シ ー ト 辞典 第 3 版 」 を 参照 し こく だ さい 。 





<style type="text/css"> 
body {margin-left:80px: 





margin-top:55px] 
</style> 
1 子 】 IE5 IE5.5 IE6 NN4 ドド し 守 4 に ルイ 
O O O O 4 ※ し 
フレ ー ム 枠 か ら の マー ジン を 指定 し た い …………… 258 
レー ム 枠 か ら ジン を 指定 p 


ペー ジ の マー ジン を 指定 し た い 





97 





フォ ント サイ ズ を 絶対 値 で 指定 し た い 


<font size=" 太 "> て </font> 










支 *eeeee]1 一 7 (1 が 最小 、 Pd が 最大 ) 






フォ ント の サイ ズ を 指定 し ます 。1 か ら 7 まで 数 字 が 大 きく な る に つれ て 、 フ ォ ン ト も 大 きく な 
り ま す 。 基準 と な る 値 (デフ ォ ル ト ) は 3 で す が 、 実際 に 画面 上 に 表示 され る 大 き さ は 、 各 ユー 
ザー の 環境 に 左右 され る の で 注意 が 必要 で す 。 


レム. | 





SD テ > 

<font size="1"> フォ ント サイ ズ 1</font><br> 

<font size="2"> フォ ント サイ ズ 2</font><br> 

<font size="3"> フォン ト サ イ ズ 3 (基準 ) </font><br> 
<font size="4"> フォ ント サイ ズ 4</font><br> 

<font size="5"> フォ ント サイ ズ 5</font><br> 

<font size="6"> フォ ント サイ ズ 6</font><br> 

<font size="7"> フォ ント サイ ズ 7</font> 


</D> 








98 フォ ント サイ ズ を 絶対 値 で 指定 し た い 


委 フォ ント サイ ズ を 証 対 人 で 指定 し た い - Microsoft Imtermet Eplorer 


アイ ル (編集 表示 お 気 に 和 DO ウー ル D へ ルプ ⑪ 


GR の 同人 の 6 の wm 家 5moo 軸 ダ の の 提 - 寺 回 ・ コ 


フォ ント サイ ズ 1 
フォ ント サイ ズ 2 

フォ ント サイ ズ 3( 基 準 ) 
フォ ント サイ ズ 4 


フォ ント サイ ズ 5 
フォ ント サイ ズ 6 


フォ ント サイ ズ 7 








フォ ント サイ ズ を 計 対 便 で 指定 し た い - Mctscape 6 


。 アイ ル (F) 編集 D 表示 び ) 検索 ジャ ン ブ ⑬ ブッ 2 マー の (B) 22 が D ヘル プ ⑪ 
@o@ oraxe mmm So 


フォ ント サイ ズ 1 
フォ ント サイ ズ 2 

フォ ント サイ ズ 3( 基 準 ) 
フォ ント サイ ズ 4 
フォ ント サイ ズ 5 


フォ ント サイ ズ 6 上 
フォ ント サイ ズ 7 


ドキュ ル ンド 発 了 (3275 ゆか 











CSS に よる フォ ント サイ ズ の 指定 トト スス ミミ オメ ミミ ミミ オメ ミオ ミ ミミ ミミ メメ メメ ミミ ミミ ミミ メス ミミ ミミ ミミ ミミ ミミ ミミ ミミ よ 】 


スタ イル シー ト を 利用 し て フォ ント サイ ズ を 指定 する 場合 は 、 一 例 と し て 次 の よう に な り ま す 。 ス タイ 
ル シ ー ト に つい て 詳し く は 本 書 姉妹 書 「 ス タイ ル シ ー ト 酵 典 第 3 版 」 を 参照 し こく だ さい 。 


<Style type="text/css"> 

body {font-size:15px} 

-size1 {font-size:20px} 

.size2 {font-size:10px] 

</style> 

<body> 

スタ イル シー ト で <span class="size1"> フォ ント サイ ズ を </span> 

<SDanl class="size2"> 指定 し ます 。</span> 

</body> 
NN4 ドド C 売 4 に ルス 

O O O 








参照 フォ ント サイ ズ を 相対 値 で 指定 し た い その 1 ……・ p.100 
博 。 フォ ント サイ ズ を 相対 値 で 指定 し た い その 2 …… p.108 


フォ ント サイ ズ を 絶対 値 で 指定 し た い 99 









フォ ント サイ ズ を 相対 値 で 指定 し た い の 1 


<font size=" 土 友 "> て </font> 





weeeee1 一 7 (1 が 最小 、7 が 最大 ) 


基準 の フォ ント サイ ズ か ら 何 段階 大 きい か (小さ いか ) を プラ スマ イナ ス を 使っ て 相対 的 に 指 
定 し ます 。 特 に 指定 が な い 場 合 、 基 準 の フォ ント サイ ズ は 3 です 。 


フ 
オ 
レス 
ト 


<p> これ が 基準 </p> 

<P><font size="-2"> 基準 か ら -2 を 指定 する と こん な 感じ </font></p> 
<P><font size="-3"> 基準 か ら -3 を 指定 する と こん な 感じ </font></p> 
<p><font size="+1"> 基準 か ら +1 を 指定 する と こん な 感じ </font></p> 
<p><font size="+2"> 基準 か ら +2 を 指定 する と こん な 感じ </font></p> 





強 フォ ント サイ ズ を 相対 価 で 指定 し た い その 1 - Microsoft internet Explorer 
アイ ル (F) 編集 (C) 表示 び ) お 気 に 入 D(⑯ ツー ル ① ヘル プ ⑬ 


の 回 国人 の の ws 衣 pmoo 側 ウ の の 人 


これ が 基準 

基準 か ら -2 を 指定 する と こん な 感じ 

基準 か ら -3 を 指定 する と こん な 感じ 

基準 か ら +1 を 指定 する と こん な 感じ 


基準 か ら +2 を 指定 する と こん な 感じ 











100 "フォ ント サイ ズ を 相対 値 で 指定 し た い その 1 


その 1 - Netscape 5 


|。 アイ ル ⑥) 編集 (EC 表示 び ) 検索 G⑤) ジャ ンプ (G) ブッ クマ ー ク (B) タ ぁ 22D ヘル プ (⑪ 
9 @.。 民 


これ が 基準 

基準 か ら -2 を 指定 する と こん な 感じ 

基準 か ら -3 を 指定 する と こん な 感じ 

基準 か ら +1 を 指定 する と こん な 感じ 
基準 か ら +2 を 指定 する と こん な 感じ 


NE | 











CSS に よる フォ ント サイ ズ の 指定 し トス エメ オミ ミミ ミミ ミミ ミミ ミト ミミ ミミ ミミ メメ 】 スエ ナメ エエ よ エメ オト ミ エメ エメ ミミ ミミ ミミ 】 


スタ イル シー ト を 利用 し て フォ ント サイ ズ を 指定 する 場合 は 、 一 例 と し て 次 の よう に な り ま す (プラ ス 、 
マイ ナス の よう な 指定 方 法 は あり ませ ん )。 スタ イル シー ト に つい て 詳し く は 本 書 姉妹 書 『 ス タイ ル シ ー 
ト 辞 典 第 3 版 』」 を 参照 し こく だ さい 。 


<style type="text/css"> 

.large {font-size:large] 

-small {font-size:smalU 

</style> 

<body> 

スタ イル シー ト で <span class="large"> フォ ント サイ ズ を </span> 
<Span class="small'> 指 定 し ます 。</span> 





</body> 
1 詞 】 | 王 】 | 土 基 ]】 IE6 NN4 ドド C 条 4 ド に 電 イ 
O O O O O O O 
参照 フォ ント サイ ズ を 絶対 値 で 指定 し た い ・………・……・ p.98 


騙 ” フォ ント サイ ズ を 相対 値 で 指定 し た い その ら …… p.108 


フォ ント サイ ズ を 相対 値 で 指定 し た いそ の 1 101 


3 は ばり pepnecarep 了 
フォ ント サイ ズ を 相対 値 で 指定 し た い その 2 


基準 の サイ ズ を 設定 する 
<basefont size=" 文 "> 
<font size=" 土 所"> て </font> 





友 eeeeee1 一 7 (1 が 最小 、7 が 最大 ) 
た weeeee 文 と の 土 の 結果 が 1 -- 7 と な る 数 字 





<basefont> タグ で 基準 と な る サイ ズ を 設定 し て お き 、 こ の 基準 の フォ ント サイ ズ か ら 何 段階 
大 きい か (小さ いか ) を プラ スマ イナ ス を 使っ て 相対 的 に 指定 し ます 。 <font size=" 土 所"> に は 、 
基準 の サイ ズ と プラ スマ イナ ス し た 結果 が 1 一 7 の サイ ズ と な る 数 字 を 指定 し て くだ さい 。 

HTML 文書 の 一 番 最初 に この <basefont size=" "> を お いて お け ば 、 そ れ 以 降 、 フ ァイル の 
終わ り まで 相対 値 で フォ ント の サイ ズ を 変更 する こと が で きま す 。 

た だ し 、 こ の 設定 は 見 出し (<h> タグ ) に は 適用 され な い の で 注意 し て くだ さい 。 


<basefont size="4"> 
<p> 基準 の サイ ズ を 4 に し て み ま し た 。 </P> 

<p><font size="-2"> 基準 か ら -2 を 指定 する と こん な 感じ </font></P> 
<p><font size="-3"> 基準 か ら -3 を 指定 する と こん な 感じ </font></P> 
<p><font size="+1"> 基準 か ら +1 を 指定 する ここ ん な 感じ </font></P> 
<p><font size="+2"> 基準 か ら +2 を 指定 する と こん な 感じ </font></p> 


| 











アイ ル ⑥ 幼生) 表示 ⑰ お 気に入り ⑧⑯ ツー ル D へ M プ ⑪ 

@・ の 軸 加 人 る の ss 支 pm0 な ケ の の G- 回 ・』 
基準 の サイ ズ を 4 に し て み ま し た 。 

基準 か ら -2 を 指定 する と こん な 感じ 

基準 か ら -3 を 指定 する と こん な 感じ 


基準 か ら +1 を 指定 する と こん な 感じ 
基準 か ら +2 を 指定 する と こん な 感じ 














102 "フォ ント サイ ズ を 相対 値 で 指定 し た い その ら 


イズ を 机 対 値 で 指定 し た 


基準 の サイ ズ を 4 に し て み ま し た . 
基準 か ら -2 を 指定 する と こん な 千 じ 


基準 か ら -3 を 指定 する と こん な 感じ 
基準 か ら +1 を 指定 する と こん な 感じ 
基準 か ら +2 を 指定 する と こん な 感じ 














CSS に よる フォ ント サイ ズ の 指定 し ルオ エエ オ メメ エメ エメ スミ ミミ ミミ ミミ ミ メ ドド KITIKXXEKIEELKKAKKXKIKYX】 


スタ イル シー ト を 利用 し て フォ ント サイ ズ を 指定 する 場合 は 、 一 例 と し て 次 の よう に な り ま す (プラ ス 、 
マイ ナス の よう な 指定 方 法 は あり ませ ん )。 ス タイ ル シ ー ト に つい て 詳し く は 本 書 姉 妹 書 「 ス タイ ル シ ー 
ト 辞 典 第 3 版 』」 を 参照 し こく だ さい 。 


ra に | 


<style type="text/css"> 

body {font-size:20px] 

.larger 人 font-size:larqer} 

.smaller {font-size:smaller} 

</style> 

<body> 

基準 の フォ ント は 20px<br> 

スタ イル シー ト で <span class="larger"> フォ ント サイ ズ を </span> 
<Span Class="smaller"> 指定 し ます 。</span> 





</body> 
1 志 】 IE5 日 王 呈 ]】 1 ココ ドド し 3 ドド し 守 4 に ルス 
O O O O O O O 
フォ ン ト サ イ ズ を 絶対 値 で 指定 し た い ・……………… pg8 


偽 ”。。 フ ォ ン ト サ イ ズ を 相対 値 で 指定 し た い その 1 -…… p.100 





フォ ント の 種類 を 指定 し た い 


<font face=" 太 , 太 "> て </font> 














六 *eeeees フ ォ ン ト の 名 前 (第 一 候補 , 第 二 候補 ,…) 


face 属性 で 、 使 用 する フォ ント の 種類 を 指定 し ます 。 複数 の 候補 を 並べ る と き は 、 そ れ ぞ れ を 
「,」 (カン マ ) で 区 切っ て 指定 し ます 。 そ の 場合 は 並べ た 順に 優先 順位 が つき ます 。 フ ォ ン ト の 名 
前 は 文字 の 全角 や 半角 、 ス ペー ス な ども 含め て 正しく 記述 し て くだ さい 。 

ユー ザー の 側 に どの フォ ント も な く 指 定 さ れ た フォ ント で の 表示 が で き な い と き は 、 ブ ラウ ザ 
に 設定 され た デフ ォ ル ト の フォ ント で 表示 され ます 。 


テ ざ さき 





<D> 
<font face="MS P 明 朝 , 平 成 明 朝 "> 明 朝 体 </font> 
</D> 


<D> 

<font face="Comic Sans MS,Times New Roman,Arial">Comic Sans MS</font> 
</D> 

<D> 

<font face="HG 創 英 角 * 77' 体 MS ゴシック , 等 幅 ゴ シッ ク ,0saka" size="6"> 
ポッ プ 体 で サイ ズ 6</font> 

</D> 








104 フォ ント の 種類 を 指定 し た い 


強 フォ ント の 知 類 を 指定 し た い - Microsoft Imternet Explorer 
アカ イル) 編集 E) 表示 W) お 気 に 入 D⑯ ツー ル ① ヘル プ ブ ⑪ 


の ・ の 回 還 の の 時 実 5m20 等 な の の 
明 朝 休 


Comic Sans 入ら 5 


ポッ プ 体 で サイ ズ 6 


イン ター ネッ ト 。 








フォ ント の 種類 を 指定 し た い - Netscape 6 


明 朝 体 
Comic Sans 5 


ポップ 体 で サイ ズ 6 


ドキ ュ メ ント : 完 了 (023 秒 








人 MSP 明 朝 、Comic Sans MS、HG 創 英 表 ポッ プ 体 が 揃っ て いる 環境 で は この よう に 表示 され ます 











CSS に よる フォ ント の 指定 トス オメ ミト ドド メド MMMIKILAIIKAYIERKKKKIYRYKRRKRLYIXKRIRSNI 


スタ イル シー ト を 利用 し て フォ ント を 指定 する 場合 は 、 一 例 と し て 次 の よう に な り ま す 。 ス タイ ル シ ー 
ト に つい て 詳し く は 本 書 姉妹 書 スタ イル シー ト 生 典 第 3 版 」 を 参照 し こく だ さい 。 


<style type="text/css"> 

-font1 {font-family:"Comic Sans MS","Times New Roman",AnaU 
-font2 {font-family:"MS 明 朝 "平成 明 朝 } 

</style> 

<body> 

<span class="font1">STYLESHEET</span> で フォ ント を 

<span class="font2"> 指 定 し ます 。</span> 

</body> 


OULIIIIKKKKKKKKAKKIKKKKEKEKKKKKKKKKEKKKEKKKRRKKKLLYKYKLYXKLLLKKKKKKRKEKSSSYU 


1】 1 IE5.5 1 ヨゴ NN4 NN4.7 に ル 


O O O O O O O 
※ Netscape Navigator 4.7 で は 文字 コー ド が 日 本 語 だ と 欧文 フォ ント が 正しく 表示 され ませ ん 





フォ ント の 種類 を 指定 し た い 105 





。]1 FONT 問 因 
フォ ント スタ イル を 指定 し た い その 1 


<b> て </b> 太字 
<1> や </1> 億 体 
<Strike> て </strike> 抹 線 
<S> </S> 抹消 線 
<tt> て </ 人 > 等 幅 
<U> ン </U> 下線 





テ ざ さき 


それ ぞ れ 太字 、 倖 体 、 抹 消 線 付 き 、 等 幅 、 下 線 付き の フォ ント を 指定 し ます 。 
<Strike> と <s> は どちら も 同じ 働き を も ち ま す 。 





<P><b> 太字 に し て み ま す </b></p> 

<P><i> 斜体 に し て み ま す </1></p> 

<p><strike> 抹消 線 を つけ て み ま す </strike></p> 
<P><S> 抹消 線 を つけ て み ま す </s></P> 

<P><tt> 等 幅 フ ォ ン ト に し て み ま す </ せ ></P> 
<P><u> 下線 を つけ て み ま す </u></D> 





106 フォ ント スタ イル を 指定 し た い その 1 


育 フォ ント スタ イル を 指定 し た い その 1 訓 |= に 
アカ イル) 編集 ) 表示 お 気 に 和 AD” 講 
@m・ の 回 回 の "の 


太字 に し て み ま す 太字 に し て み ま す 


維 大 こん て み ま チ 誰 大 こ し て みみ ま チ 
ーーーーーーーーーー ーー 抹消 線 を つけ て み ま す 
等 幅 フ ォ ン ト に し て み ま す 等 幅 フ ォ ン ト に し て み ま す 











(は すそ て 予 4 さ の ) 1 LK オ オミ ミミ ミミ オミ オミ ミミ ミミ オミ スミ ミミ ドド トト トミ KIXXKSEKISSS】 トメ エエ メメ 】 


スタ イル シー ト を 利用 し て 同様 に 抹消 線 と 下線 を 指定 する 場合 は 、 一 例 と し て 次 の よう に な り ま す 。 ス 
タイ ル シ ー ト に つい て 詳し く は 本 書 姉 妹 書 「 ス タイ ル シ ー ト 辞典 第 3 版 」 を 参照 し こく だ さい 。 


<style type="text/css"> 

-strike {text-decoration:line-through] 
.underline {text-decoration:underline} 
</style> 

<body> 

<P Class="strike"> 抹 消 線 </p> 

<P Class="underline"> 下 線 </p> 





</body> 
oooeoooseeeoeoeee aceseseeeeeoe る 0 ia な おかる ある も の の 千 ああ eei@ あ や 999 の な KCCD 
1 3 1 王 】 | 王 た ]】 1 ココ NN4 ドド し 守 4 N6.2 
O O O O O O O 
参照 フォ ント スタ イル を 指定 し た いそ の ら ・…・………・…・ p.108 
内 232 な p54 


フォ ント スタ イル を 指定 し た い その 1 107 





6 rm 
フォ ント スタ イル を 指定 し た い その 2 


<biq> ら つ </biq> 大 きめ の 文字 


<small> て </small> 小さ ゅ の 文字 





<big> は 大 きめ の 、<small> は 小さ べ め の フォ ント で 表示 し ます 。 


<p> これ が 標準 で す <D> 
<P><big> 大 きめ の 文字 に し て み ま す </big></p> 
<P><small> 小さ め の 文字 に し て み ま す </small></p> 





雪 フォ ント スタ イル を 指定 し た い .… 司 | 大 | 孤 
アイ ル (E) 編集 表示 の W 83? 鞭 


@m・ の 回 回" ら " 


民 フォ ント スタ イル を 指定 し た .… 全 | 回 | 際 














これ が 標準 で す 
大 きめ の 文字 に し て み ま す 大 きめ の 文字 に し て み ま す 
小さ め の 文 害 に し て み ま す 小さ め の 文 字 に し て み ま す 
@ イン ター ネッ ト 記 
ム [文字 サイ ズ ] を [中 ] に 設定 し た 場合 の 表 ム フ ォ ント サイ ズ を [16] ピク セル に 設定 し た 
示例 合 の 表示 例 
E! IE5 IE5.5 IE6 NN4 NN4.7 NG6.2 
O O O O O O 9 





フォ ント サイ ズ を 絶対 値 で 指定 し た い ・……………… 


p.98 フォ ント サイ ズ を 相対 値 で 指定 し た い その ら ・…・ 0 
フォ ント サイ ズ を 相対 値 で 指定 し た い その 1 


p100 フォ ント スタ イル を 指定 し た い その 1 


108 フォ ント スタ イル を 指定 し た い その ら 


物理 的 か 論理 的 か COCKXX ス KK スバ エメ メ トト エメ エエ エエ バナナ エ メメ メオ メス エ メメ スエ メメ メメ エエ メメ オス スエ ルル ルル ルル ルルル 


Internet Explorer や Netscape を 使っ て いる と 、 太 字 や イタ リッ ク 体 な ど 同 じ よ うな テキ スト の 表示 
に 遭遇 する こと が あり ます 。 
次 の 2 つの 例 を みて くだ さい 。 





<b> 注意 </b> <strong> 注意 </strong> 


どちら の ケー ス も Internet Explorer や Netscape な ど 一 般 的 な ブラ ウザ で は 太字 で 表示 され ます 。 そ 
の た め 、 表 示 の され 方 か ら 理 解 し て <b> も <strong> も 同じ よう な 働き の タグ だ と 思わ れる こと が ある 
か も し れ ま せん 。 し か し 両者 は まっ た く 違う 性 質 を 持っ て いま す 。 

これ は 両方 の 要素 が 持つ 意味 を 考え て みれ ば 明らか に な り ま す 。 

<b> タグ は Bold、 太 字 と いう 意味 で す 。 つ まり 太字 で 表示 せよ と フォ ント の スタ イル を 具体 的 に 指定 
し て いま す 。 一 方 <strong> タグ は Strong EmphasisS、 よ り 強 い 強調 の 意味 で す 。 強 調 せ よ と 指定 は し 
て いて も 、 ど の よう に 強調 する か と いう 具体 的 な 表示 方 法 は 指定 し て いま せん 。 両 者 の 間 に は この よう な 
違い が ある の で す 。 

この よう な 性 質 の 差 か ら 、 テ キス ト に 作用 する いく つか の 要素 を 次 の よう に 分 類する こと が で きま す 。 





AN | 


フォ ント 情報 を 物理 的 に 指定 する も の 
b、i、strike、s、t せ 、u、big、small 


テキ スト の 構造 上 の 情報 を 論理 的 に 定義 むせ る も の 
dfn、em、strong、cite、code、kbd、samp、var、abbr、acronym 


物理 的 に 指定 する 要素 で タグ 付け を 行っ た 場合 、 指定 され た 表現 が で き な い 環境 で は 効果 が あり ませ ん 。 
し か し 、 論 理 的 スタ イル の 要素 で タグ 付け し た 場合 は 、 表 示方 法 を 定め て いま せん か ら 、 ユ ー ザ ー の 状況 
に 応じ て 適切 な 表示 を 選択 する こと が (理論 上 は ) 可能 で す 。 物 理 ス タイ ル の いく つか の 要素 が 非 推奨 
(deprecated) に な っ て いる の は この よう な 特色 が 影響 し て いま す 。 

Internet Explorer や Netscape で は 結果 的 に 物理 スタ イル 、 論 理 ス タイ ル の 区 別 な く 、 太 字 や イタ リ 
ッ ク 体 、 等 幅 な ど で 表示 され る の で 理解 し に くい か も し れ ま せん 。 し か し 、 こ こ に あげ た 要素 の (も ちろ 
ん その 他 の 要素 に 関し て も 、 で す が ) ブラ ウザ に 表示 され た 様子 で は な く 、 ま ず は それ ぞ れ の 要素 が 持つ 
意味 を 考え て ゆく と 、 こ の 違い も 理解 で き 、 よ り 正 し い HTML 文書 を 作成 で きる よう に な り ま す 。 


OUTCLYYIEIKITKKEKKKIIKRRRRRLRARLARRRRRRRRAKIRRRRRKLKAKIKIYEKKERKYAMXAXYXYKXXSSNI 
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7 
特殊 な 文字 を 表示 し た い 


& 番 号 : 
& キーワ ー ド : 







CH 


タグ の 表記 に 用 いら れ て いる 記号 (&、<、> な ど ) や 、 キ ー ボ ー ド で は 入力 で き な い 文字 ・ 記 
号 な どの 特殊 な 文字 を フラ ウザ に 表示 する に は 、「&#229:] の よう に 番号 で コー ド を 指定 する か 、 


pg4 「Slt:] の よう に 短い 名 前 で 指定 し ます 。 
MM 殺 : 表 示し た い 文 字 キー ワー ド で の 指定 番号 で の 指定 
ト < &lt &#60: 
> &gt: &#62: 
@ &copV: &#169: 
⑤ &redj &#174: 


HTML4.01 で は 特殊 な 文字 は 「 文 字 参 照 」] と し て 、「ISO 8859-1] 「 ギ リシア 文字 ・ シ ン ボ 
ル ・ 数 学 記号 ] 「 そ の 他 の 特殊 な 文字 」 の 3 種類 に 分 か れ て 定義 され て いま す (p.112 参照 )。 た 
だ し 、 実 際 に 表示 可能 か どう か は OS や ブラ ウザ の バー ジョ ン 、 設 定 、 表 示 フ ォ ン ト な ど に よっ 
て 異な り ま す 。 また キー ワー ド は 大 文字 小文字 を 区 別 する 点 に も 注意 し て くだ さい 。 





<D> 

ホー ムペ ー ジ で タグ の 解説 を する と き は 、 い き な り <b> タグ で 文字 の 強調 </b> タグ で 終 
了 で す 、 な ん て や っ て も ダメ で す よ 。.… ホ ラ ね 

</D> 

<P> 

文字 を 強調 する に は 、&lt:b&qt: タ グ を 使い ます 。 強 調 の 終了 タグ は &lt:/b&qt: で す 。 っ て 
こう や っ て や る ん で す 。 

</P> 











110 特殊 な 文字 を 表示 し た い 


当 千丈 な 文字 を 表示 し た い - Microsoft Internet Explorer 


アイ ル () 編集 表示 お気 に 入 0 ツール ① へ ルプ ブ ⑪ 


@ ゃ ・ の 還 胃 る テ 


ホー ムペ ー ジ で タグ の 解説 を する と き は 、 いき な り タ グ で 文字 の 強調 タグ で 
終了 で す 、 な ん て や っ て も ダメ で す よ 。 .…… ホ ラ ね 


文字 を 強調 する に は 、<b> タ グ を 使い ます 。 強調 の 終了 タグ は </b> で す 。 っ 
て こう や っ て や る ん で す 。 





NN 特殊 な 文字 を 表示 し た い - Netscape 6 


ホー ムペ ー ジ で タグ の 解説 を する と き は 、 いき な り タ グ で 文字 の 強調 タグ で 終了 
で す 、 な ん て や っ て も ダメ で す よ 。 ホラ 


る に <b> タ グ を 使い ます 。 強調 の 終了 タグ は < ぐ /b> で す 。 っ て こう 
や っ て や る ん で す 。 








1 ココ NN4 NN4.7 ド に ルコ 
O O O O O 
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テ ざ さき 
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文字 参照 
ISO 8859-1 








[at160, 
































































































































『[ [ | 
に 六 し E | 



































シン ボル ・ 数 学 記号 
fnoE | 時 02.」 
IA as| 
IEeta。 4914 
| 科 Gammar &#915 
lgDels: 916. 
Epslonr &4917 
EZ 218. 
5 asi9 
区 Theta &#920 
ITota: 921 
衝 Kappai |&#922. 



















































































































































































































































































テ ざ さき 3 


) 113 





<ul><li> て </i></ul> 





<ul> タグ と </ul> タグ で その 範囲 が リス ト で ある こと を 示し ます 。 項目 の 順序 が 重要 で な い 科 
条 書 き を 作成 し た い 場 合 に 使用 し 、 行 頭 の 記号 に 「・」 を 用 いた リス ト が 形成 され ます 。 リ スト 
表示 し た い 項 目 は それ ぞ れ <li> タグ と </l> タグ に 挟ん で 並べ ます 。 

一 般 的 に は 上 下 に スペ ー ス が あけ られ 、 項 目 ご と に マー ク (デフ ォ ル ト は 黒丸 ) が つき 、 リ ス 

ト 全 体 は イン デン ト ( 字 下 げ ) し て 表示 され ます 。 


<P> 当校 の 人 気 講座 </p> 
<ul> 
<li> 英国 式 ア ロマ セラ ピー </lli> 
<li> カリ グラ フィ ー </i> 
<li> 基礎 か ら の 英会話 </li> 
</ul> 








記 リ スト を 作り た い - Micro 
アイ ル ( 乾 集 ) 表示 お 気 に AOQ ” 鞭 


@・ の 6 回 還る の | の 
当校 の 人 気 講座 
s 英国 式 ア ロマ セラ ピー 


* カリグラフィー 
< 基礎 か ら の 英会話 








国 式 アロ マセ ラ ピ ー 
s カリ ダラ フィ ー 
* 基礎 か ら の 英会話 














時 付き リス ト を 作り た い ……… 
伯 "。 リス ト の マー ク を 変更 し た い ・ 








<ol><Hi> ン </i></ol> 





<ol> タグ と </ol> タグ で その 範囲 が 番号 付き の リス ト で ある こと を 示し ます 。 順番 が 重要 な リ 
スト を 作成 し た い 場 合 に 使用 し ます 。 行頭 の 記号 が 連 番 の 数 字 に な っ て 表示 され ます 。 

<ul> タグ に よる リス ト と 同様 、 一 般 的 な ブラ ウザ で は 項目 が イン デン ト さ れ 、 上 下 に スペ ー ス 
を あけ て 表示 され ます 。 


S0URCE 






テバ トー 


<P> 当校 の 人 気 講座 </p> 
<o> 
<li> 英国 式 ア ロマ セラ ピー </li> 
<li> カリ グラ フィ ー </l> 
<li> 基礎 か ら の 英会話 </li> 
</ol> 







当校 の 人 気 講座 当校 の 人 気 講座 

1. 英国 式 ア ロマ セラ ピー 1 半 還 穫 7 ロ マセ ラ ピ ー 
2. カリ グラ フィ ー 2 カリ グラ フ 

3. 基礎 か ら の 英会話 3 生 確 か ら の 箕作 











参照 番号 付き リス ト の マー ク を 変更 し た | p.11B リス ト の 連 番 を 変更 し た いい p.188g 
了 リス ト の 開始 番号 を 変更 し た い ・… …p-.120 








| リヨン ュ ミコ の .9 ヨ リ 隔 


<ul type=""><li> て </i></ul> 
<ul><i type=" 廊 "> て </i></ul> 





太 eeeeeediSC、circle、Square 





<ul> タグ で は 、type 属性 を 使っ て 、 リ スト の マー ク を 変更 する こと が で きま す 。 
<ul> の 場合 は disc (黒丸 )、circle ( 白 丸 )、square (四角 一 般 的 な ブラ ウザ で は 黒く 塗り 
つぶ され た 四角 で 表現 され ます ) の 3 種類 か ら 指定 し ます 。 
MM 。 <|> タ グ に type 属性 を 指定 し た 場合 は 、 指 定 し た 項目 の マー ク だ けが 変更 され ます 。 こ の 性 質 
を 応用 する と 、 項 目 ご と に 違う マー ク を つけ る こと も 可能 で す 。 





<ul type="circle"> 
<li> 英国 式 ア ロマ セラ ピー </H> 
<i> カリ グラ フィ ー </i> 
<li> 基礎 か ら の 英会話 </li> 
</ul> 
<ul> 
<li type="disc"> 英 国 式 ア ロマ セラ ピー </i> 
<i type="circle"> カリ グラ フィ ー </i> 
<li type="square "> 基礎 か ら の 英会話 </li> 
</ul> 








o 英国 式 ア ロマ セラ ピー 1 。 英国 式 ア ロマ セラ ピー 
o カ リグ ラフ ィ ー ニ 


o リリ )/ ee 
基礎 か ら の 英会話 。 半 礎 か ら の 英会話 


ロ SE 5 ロ 2 阿 PHYE ラ ピー 
リグ ラフ ィ ー に 2 ラウ ウィー 
。 革 礁 か ら の 英会話 m 基礎 か ら の 英会話 











CSS に よる リス ト の マー ク 変 更 オオ ミミ エエ オミ ミミ ミス メト オ オメ オミ ミミ ミミ ミミ ミミ スミ ミミ ミミ ミミ ミミ ミス メメ ミミ スミス メス 】 


スタ イル シー ト を 利用 し て 同様 に リス ト の マー ク を 変更 する 場合 は 、 次 の よう に な り ま す 。 ス タイ ル シ 
ー ト に つい て 詳し く は 本 書 姉 妹 書 「 ス タイ ル シ ー ト 辞典 第 3 版 」 を 参照 し こく だ さい 。 


<style type="text/css"> 
ul {lst-style-type:circle} 
</style> 
<body> 
<ul> 
<li> 英国 式 ア ロマ セラ ピー</l> 
<li> カリグラフィー</li> 
<li style="list-style-type:square"> 基礎 か ら の 英会話 </li> 
</ul> 
</body> 


OILLLIERRIILLIKRKLLXALLSRRERKRKRRKAKYKRRRRIKAYAINRNIYAYKKKERRR】 


みこ トー 





1 プ * 1 IE5.5 IE6 NN4 トビ 守 4 に ルコ 
O O O O O O O 
参照 リス ト を 作り た い …… ド ドド ドド ドド ドド ドコ p.114 





ーー 
| リコ ヨコ ミコ ヴ :01 ヨ コリ 隔 IN| 


<ol tyDpe=" 文 "><Hi> て </Hi></ol> 
<ol><i type=" 太 "> て </i></ol> 





廊 * ゃ essee1、a、 信 、i、1 





<ol> タグ に type 属性 を 指定 する と 、 リ スト の マー ク を 変更 する こと が で きま す 。1、a、A、 [、 
1 の いずれ か の 値 を 指定 する と 、 次 の よう に マー ク が 変更 され ます 。 
1 アラ ビア 数 字 (1,2, 3, …) 
a 小文字 ア ヂ ル ファ ベッ ト (a, b, C, ……) 
A 大 文字 ヂ ル ファ ベッ ト (A, B, C, …) 
i 小文字 ロー マ 数 字 (i, ji 品 , .…) 
1 大 文字 ロー マ 数 字 (| 川 , .… ) 
<lli> タグ に type 属性 を 指定 し た 場合 は 、 指 定 し た 項目 の マー ク だ けが 変更 され ます 。 


セル トー 





<ol type="a"> 
<li> 英国 式 ア ロマ セラ ピー </> 
<i> カリ グラ フィ ー </> 
<i> 基礎 か ら の 英会話 </> 
<li> ガー デニ ング 入門 </li> 
<li> 実用 書道 </l> 
</o に 
<0l> 
<li> 英国 式 ア ロマ セラ ピー </li> 
<lii> カリ グラ フィ ー </H> 
<li> 基礎 か ら の 英会話 </Hi> 
<li type="1"> ガー デニ ング 入門 </l> 
<li type="1"> 実用 書道 </li> 
</ol> 






















a 英国 式 ア ロマ セラ ピー 
b カリ グラ フィ ー 

c. 基礎 か ら の 英会話 

d ガー デニ ング 入門 

e 実用 書道 





1. 英国 式 ア ロマ セラ ピー 
の カリ グラ フー 

3. 基礎 か ら の 英会話 
が ー デ ニッ グ 入 問 

V 実用 書道 














CSS に よる 番号 付き リス ト の マー ク 変 更 IIIRXX) DOSEREKEKIRKRKRYXKRXRERRRRJ 


スタ イル シー ト を 利用 し て 同様 に 番号 付き リス ト の マー ク を 変更 する 場合 は 、 次 の よう に な り ま す 。 ス る 
タイ ル シ ー ト に つい て 詳し く は 本 書 姉妹 書 「 ス タイ ル シ ー ト 重 典 第 3 版 」 を 参照 し て くだ さい 。 ト 
<style type="text/css"> 
ul 人 st-style-type:lower-alpha} 
</style> 
<body> 
<ul> 

<li> 英国 式 ア ロマ セラ ピー</li> 

<li> カ リグ ラフ ィ ー</li> 

<li> 基礎 か ら の 英会話 </li> 

<i style="list-style-type:lower-roman"> ガー デニ ング 入門 </li> 

<hi style="list-style-type:upper-roman"> 実 用 書道 </li> 





</ul> 
</body> 
1 1 ヨガ 1 王 誠 】 円: NN4 が て 和 4 が に ルコ 
O O O O O O O 
番号 付き リス ト を 作り た い ・… ド ーー p.115 リス ト の 連 番 を 変更 し た いい ーー p.18 ら 
リス ト の 開始 番号 を 変更 し た い ……・…・…・…ー…ーー p.120 








リヨン ミコ の: コリ 隔 


<ol start=" 娘 "><li> て </li></o に 





支 *eeess 開 始 番号 





Start 属性 を 使う と 、<ol> タグ で 作成 し た リス ト の 開始 番号 を 変更 で きま す 。 
type 属性 と 併用 する こと も で き 、 た と えば 、<ol type="a" start ="3"> と し た 場合 、 開 始 値 
=3 は cC と な り ま す 。 





<ol start="2"> 
<li> 英国 式 ア ロマ セラ ピー </H> 
<Hi> カリ グラ フィ ー </H> 
<li> 基礎 か ら の 英会話 </l> 
<li=> ガー デニ ング 入門 </li> 
<i> 実用 書道 </li> 

</o> 

<ol type="1" start="2"> 
<li> 英国 式 ア ロマ セラ ピー </> 
<li> カリ グラ フィ ー </i> 
<li> 基礎 か ら の 英会話 </> 
<ii> ガー デニ ング 入門 </li> 
<i> 実用 書道 </l> 

</o> 








120 











2. 英国 式 ア ロマ セラ ピー 
3. カリ グラ フィ ー 

4. 基礎 か ら の 英会話 

5 ガー デニ ンク グ 久 門 

6 実用 書道 


II 英国 式 ア ロマ セラ ピー 
皿 カリ グラ フィ ー 

IV 基礎 か ら の 英会話 
W ガー デニ ッ グ 入門 
VI 実用 書道 


















の の i よ の いい 


II 
中 
IV 
V 
MI 











1 ズ 】 1 1 た 】 1 ミカ NN4 ドド 完 4 が に ル ] 
O O O O O O 
参照 番号 付き リス ト を 作り た い …… パ ドド ドド ドド p.115 リス ト の 連 番 を 変更 し た い ・… バ ドド ーー p.12 ら 
1 番号 付き リス ト の マー ク を 変更 し た い ………・…・…・ p.118 





ルッ トー 





<ol><li value=" 文 "> て </i></o> 





支 *eeees 開 始 番号 





<li> タグ に value 属性 を つけ 、 リ スト 項目 の 番号 を 指定 し ます 。 そ の 次 の 項目 か ら は 、value 
属性 で 設定 し た 番号 か ら の 連 番 に な り ま す 。 

通常 は デフ ォ ル ト で 使わ れる 整数 を 変更 する こと に な り ま す が 、type 属性 と 併用 すれ ば 、type 
g 用 属性 で 指定 し た 値 が 変更 され ます 。 た と えば 、<ol type="a"><li value="4"> と し た 場合 、 番 号 
で は d と な り ま す 。 
この 属性 は <ol> タグ 内 で の み 使 用 し ます 。 


<0l> 


<li> 英国 式 ア ロマ セラ ピー </li> 
<lii> カリ グラ フィ ー </i> 
<li value="6"> 基礎 か ら の 英会話 </li> 
<li> ガー デニ ング 入門 </li> 
<li> 実用 書道 </li> 
</ol> 
<ol tyDe="1"> 
<li> 英国 式 ア ロマ セラ ピー </li> 
<li> カリ グラ フィ ー </li> 
<li value="6 "> 基礎 か ら の 英会話 </i> 
<li> ガー デニ ング 入門 </li> 
<li> 実用 書道 </> 
</ol> 
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英国 式 ア ロマ セラ ピー 
カリ グラ フィ ー 
基礎 か ら の 英会話 

ガー デニ ング 入門 
実用 書道 


i 英国 式 ア ロマ セラ ピー 
ii カリ グラ フィ ー 
( 基礎 か ら の 英会話 














トー 





1】 1 1 主 寺 】 1 ココ NN4 NN4.7 に に ル 4 
O O O O O O O 
参照 番号 付き を リス ト を 作り た いい に に に p.115 リス ト の 開始 番号 を 変更 し た い …………・・・……・ p.120 
1 番号 付き リス ト の マー ク を 変更 し た い ・………・……・ p.118 








セット ー 





[ 
ompact 履 性 の み DEPRECATED 隔 | 


<dl><dt> で </dt><dd> で </dd></dl> 
<dl compact><dt> </dt><dd> へ </dd></dl> 





<dl> タグ と </dl> タグ で 定義 リス ト を 設定 し ます 。 定義 リス ト と は 、 定 義 し た い 用 語 と その 用 
語 の 説明 と で 形成 され た リス ト の こと で す 。<dt> に 定義 し た い 用 語 を 記述 し て 、 そ の 用 語 の 説明 
を <dd> に 記述 し ます 。 こ の <dt> と <dd> は セッ ト で 使用 し ます が 、<dl> と </dl> タグ の 間 に 
複数 並べ る こと が で きま す 。 

compact 属性 は 、 こ の 定義 リスト を より 小さ く 表 示す る よう 指定 する も の で 、 用 語 が 短い と き 
に の み 有 効 で す 。 た だ し 、 推 奨 し な い 属 性 (タグ ) に 指定 され て いま す 。 表 示方 法 は ブラ ウザ に 
より ます が 、 通常 は 用 語 と 説明 が 同列 に 表示 され ます 。 





<dl> 
<dt> アロ マセ ラビ ピー </dt> 
<dd> 芳香 植物 か ら 抽出 し た エッ セン シャ ルオ イル (精油 ) を 使い 、 心 と 体 を ケア する 自 
然 康 法 。</dd> 
<dt> カリ グラ フィ ー </dt> 
<dd> アル ファ ベッ ト の 書道 。 西洋 書道 と も 呼ば れる 。</dd> 
</dl> 
<dL compact> 
<dt> 茶道 </dt> 
<dd> 茶の湯 の 道 。 抹 茶 で 立て た 茶 に より 来客 を も て な す 礼 法 の こと 。</dd> 
<dt> 俳句 </dt> 
<dd> 五 七 五 の 三 句 、 計 十 七 文字 の 定型 か ら 成り 、 季 語 を 含む こと を 約束 と する 日 本 独自 
の 短 詩 型 文芸 の こと 。</dd> 
</d に > 








当 用 語 の 定義 を り リスト 表 示し た い - Microsoft Internet Explorer 


イル 編集) 表示 お 気 に 入 D⑩ ウー ル ①D へ プ ⑪ 


有 
AM (精油 ) を 使い 、 心 と 体 を ケア する 自然 療法 。 
ラフ ィ ー 
アル ファ ベッ ト の 書道 。 西洋 書道 と も 呼ば れる 。 


茶道 茶の湯 の 道 。 抹茶 で 立て た 座 に より 来客 を も て な す 礼 法 の こと 
俳 名 トー 計 十 文字 の 定型 か ら 成り 、 季語 を 含む こと を 約束 と する 日 本 独自 の 短 詩 


と 








アロ マセ ラ ピ ー 
カリ リグ 5 机 し た エ ッ セ ン シ ャ ルオ イル (精油 ) を 使い 、 心 と 体 を ケア する 自然 療法 。 
アル ファ ベッ ト の 書道 。 西洋 書道 と も 呼ば れる 。 
茶 
二 茶の湯 の 道 。 抹 府 で 立て た 茶 に より 来客 を も て な す 礼 法 の こと 。 


提 紀 計 十 七 文字 の 定型 か ら 成り 、 季 話 を 含む こと を 約束 と する 日 本 独自 の 短 詩 型 文 





人 る フォ ント サイ ズ を [16] ビク セル に 設定 し た 場合 の 表示 例 。Netscape で は 表示 サイ ズ を 小さ くし て も compact 属 
性 で 同列 表示 は され ませ ん 














1 プ ) 1 IE5.5 IE6 NN4 DNC 守 4 ド が に ルオ 
O (9⑳) O O O O O 
※ ど ちら の ブラ ウザ と も 表示 文字 サイ ズ が 大 きい と 、compact 属性 で 用 語 と 説明 が 同列 表示 され な い 場 合 が あり ます 








<imqg src=" 文 "> 





指定 し た 場所 に 、 画 像 を 埋め 込み ます 。 娘 に は 画像 ファ イル の URL を 記述 し ます 。 
な お 、 画 像 を 埋め 込む 場合 に は alt 属 性 (p.128 参照 ) も 必ず 指定 する こと に な っ て いま す の で 
注意 し て くだ さい 。 


<PD> 


<img src="4birds.jpg"> 
</D> 








画像 掲載 時 に は サイ ズ に 注意 ミエ スミ ミミ トミ スミ ミスミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ まま まま 】 オメ スミ ミミ ミミ ミ まま) は エ スミ 】 


最近 は 通信 環境 も 良く な り 、 比 較 的 大 き な サ イズ の 文書 や 画像 を 扱う こと も そう 難し いこ と で は な く な 
り ま し た 。 し か し 、 ア クセ ス し て くる 人 の 環境 は さま ざま だ と いう こと を 忘れ な いよ うに し まし ょ う 。 画 
像 を 使う 場合 に は 、 色 数 を 落と し た り 圧 編 率 を 上 げ る な ど し て ファ イル サイ ズ を な る べく 小さ くし た ほう 
が よい で し ょ う 。 最 初 は 小さ い 画 像 (サム ネイ ル ) を 表示 し て お き 、 大 き な 画 像 は 別 の ペー ジ に 飛ん で 見 
て も ら う と いう の も ひと つの 手 で す 。 そ の 際 、 フ ァイル サイ ズ も 書き 添え て お く と 、 な お 親切 で す 。 

また 、 画 像 を 表示 で き な い ブラ ウザ を 使用 し て いる 人 や 、 画 像 を 表示 し な い 設 定 で アク セス し て くる 人 
が いる こと も 忘れ て は な り ま せん 。 こ れ に つい て は 次 項 を 参考 に し て くだ さい 。 


OILKKKIRSIRRRERYLAYRKERKKRKKKKKKRKKEKRRKRRREEEEKKE HOLE PCO 


<img> タグ の 今後 ORCCCCECCCCCCCCCCLCCCCCCKTCCTPPYYEYPPPEYPPP ee POCCCO 


W3C で は <img> タグ の 代わ り に 、<object> タグ を 用 いる 方 向 で 標準 化 の 動き が 進ん で いま す 
(p.281 参照 )。 


COAYAKAAKYKRRRRKRRRKXYIIKRRXRKIXRRRRRRRRRRRRERERKRKRREREEEI DTIYSI CC 





イル 編集 表示 お気 に 入 D⑯ ウー- ル D へ AM プ ⑪⑯ 


中 の 回 の の 云 bmoo 軸 ガ 7 の 6 











イン ター ネッ ト 





























1 子 3 1 | 王 基 -】 IE6 NN4 ドド し 完 4 ド に ルコ 
O O O O O O O 
参照 背景 に 画像 を 設定 し た い …・P.7B テー ブル の 背景 画像 を 指定 し た い ・・ 
1 画像 の 代わ り の テキ スト を 指定 し た い ・… ・P.12B セル の 背景 画像 を 指定 し た い 中 
画像 を 送信 ボタ ン に し た い ・……・ Bo …・D.170 さま ざま な 形式 の デー タ を 扱い た い ・……・ ド | p.281 
ボタ ン を 作り た い …*p.172 








AL WW 


<imdg src=" 友 "alt=" 寺 "> 





雄 画像 ファ イル 名 (URL) 
ww… 画 像 の 代わ り の テキ スト 





画像 を 表示 で き な い ブラ ウザ の た め に 、 画 像 の 代わ り に 表示 され る テキ スト を 指定 する の が alt 
属性 で す 。 画像 を 読み 込ま な いよ うに 設定 し て いる ブラ ウザ や 、 画像 を 表示 で きる ブラ ウザ で あ 
っ て も 画像 を 読み 込む まで の 時 間 、 ま た 画像 の 読み 込み に 失敗 し た 場合 に も この テキ スト が 表示 
され ます 。 

HTML4.01 で は alt 属性 を 必ず 設定 する こと に な っ て いま す が 、 画像 の 代用 と な る テキ スト で 
すか ら 、 関 係 の な い テ キス ト や 無 意 味 な テキ スト な ど を お か な いよ う 注 意 し て くだ さい 。 


<D> 
<img src="4birds.jpg" at="4 羽 の と り "> 
</Pp> 











当 画像 の 代わ り の テキ スト を 指定 し た い - Microsoft Imternet Explorer 
イル) 編集 (ED 表示) お 気 に 入 D⑯ ウール ① ヘル プ ⑪ 








人 画像 が 読み 込ま れ な い 場 合 、al 属性 の 内 容 が 表示 され ます 





N 画像 の 代わ り の テキ スト を 指定 し た い - Netscape 6 
|。 アイ ル ) 編集 (E) 表示 (V) 検索 G) ジャ ンプ (3) ブッ マー が (B) タ 20(D ヘル プ (⑪ 


の デー ラキ ーー 


ツー ミユ 





人 ^ 画 像 が 読み 込ま れ な い 場 合 、alt 属性 の 内 容 が 表示 され ます 





alt 属性 は 必須 スス ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミス ミミ ミミ ミミ ミミ スミ ミ スミ トミ ミミ メ ミミ ミミ ミスミ ミミ ミミ ミミ ミミ ミス ミミ メメ ミミ ま すま 】 


HTML4.01 か ら 画 像 に 対し て 必ず alt 属性 を 指定 する こと に な り ま し た 。 
関係 の な い テ キス ト や 無 意 味 な テキ スト を お か な い 、 と いう の は 、 つ まり 画像 の 代わ り に その テキ スト 
が 表示 され て も 前 後 の 文 意 が 通る よう に し て お く と いう こと で す 。 ア クセ ス し て くる 人 の 中 に は 画像 の 表 
】 示 を オフ に し て いる 人 も いま すし 、 最 初 か ら テ キス ト し か 表示 し な い ブ ラウ ザ も 存在 し ます 。 そう し た ブ 
ラウ ザ で 表示 し た と き に も お か し く な い テ キス ト を 設定 する こと を 考え て くだ さい 。 代 わり の テキ スト を 
特に 設定 する 必要 が な い 画像 の 場合 に は 「alt=""] と し て お け ば よい で し ょ う 。 


ECTYYYYYYYYYYETKYYYXKTKKKIKIKKLKKKIRRIIILRIKIKKKKLKAKRIRKKKAKLKKKRIRIRRAAAR 


1!】 1 1 二 基 】 1 ミカ ドド P NN4.7 N6.2 





O O O O O O O 
] 
0 129 
エト トト トト トー ニー ーーー ーーー ーーーー ーー ーーー | 





ペー ャ ユ 





<img src=" 文 "width="" height=" の "> 





文 *eses 男 像 ファ イル 名 (URL) 
の ee 幅 (ビク セル また は %) 
es 高 さ (ビク セル また は %) 





画像 の 表示 サイ ズ を 指定 する と き に は 、width 属性 、height 属性 を 使用 し ます 。 

ピク セル で は 画像 の サイ ズ を 直接 指定 し 、 パ ー セ ント (%) で は ウイ ンド ウ の 大 き さ に 対す る 
割合 で 指定 し ます 。 し た が っ て パー セン ト で は 画像 の サイ ズ は 相対 的 に な り 、 ウ イン ドウ の サイ 
ズ に 左右 され ます 。 width 属性 、height 属性 を 指定 し な い 場 合 は 画像 本 来 の サイ ズ で 表示 され ます 。 


<D> 


<img src="birds3.jpg" width="200" height="200" alt=""> 


<imq src="birds3.jpg" width="90" height="250" alt=""> 
<img src="birds3.jpg" width="25%" height="20%" alt=""> 
</P> 











多く か と り PP 科 … ド い ババ ーー ドー ドー ドー PPPPPCCCLLLYYYP CCCCCCCYYPLTP ・ 


width、height 属性 は 必須 の 属性 と は され て いま せん が 、 こ れ ら を 指定 し て お け ば 画像 の レイ アウ ト を 
より 速く 確定 で きる た め 、 読 み 込み か ら 表示 まで の 時 間 を 短縮 する こと が で きま す 。 な る べく 指定 する よ 
うに し まし ょ う 。 


HOKTKKEYIIKKYKIKLRAKIKKLKLKKEIRRIRRRRRYRREEEK COOXKYYIYYKYKYYSYI DDLELKYYI * 







1 


^ ム ピク セル 指定 で は 絶対 的 、 バ ー セ ント 指定 で は ウィ ンド 
ウ の 大 き さ に 対し て 相対 的 な 指定 と な り ま す 








ツー ミユ 


人 ピク セル 指定 で は 絶対 的 、 バ ー セ ント 指定 で は ウィ ンド 
ウ の 大 き さ に 対し て 相対 的 な 指定 と な り ま す 








1 IE5 1 王 た -】 1 ゴゴ NN4 NN4.7 に 


O O O O O O O 
※ Netscape 6.0 で は バー セン ト に よる 指定 が 不安 定 で す 





| 


1 リヨン: (コザ: ヨリ 了 同 (| | 


<1mg Src=" 文 " border= "区 "> 





文 seee 画 像 ファ イル 名 (URL) 
た ゃ ees 枠 線 の 太 さ (ピクセル) 





一 般 的 に は 画像 の 周り に 枠 線 は 引か れ ま せん 。 画像 を 枠 線 で 囲む 場合 に は border 属性 を 使い 、 
線 の 太 さ を ピク セル で 指定 し ます 。 

画像 に リン ク を 設定 し た と き に 表示 され る 枠 線 の 有無 や 太 さ も 、 こ の border 属性 で 変更 する こ 
と が で きま す 。 た だ し 枠 線 の 色 の 指定 は で きま せん 。 


S0URCE 
<PD> 


<imdq src="birds3.jpg" border="0" width="200" height="200" alt=""> 





=img src="birds3.jpg" border="5" width="200" height="200" alt=""> 
=img src="birds3.jpg" border="10" width="200" height="200" alt=""> 
</D> 








当 西 偽 の 視線 を 訪 定 し た い - Microsoft Internet Explorer 


アイ ル (P) 編集 D 表示 お気 に 入 D⑯ ウー ル ① ヘル プ ⑪ 


@・ の 回 国人 の の 四宮 5m20 仙 カ の の 





ツー ミユ 








CSS に よる 画像 の 枠 線 の 指定 EUCCUUCLCCC ス エエ ナメ メオ ミミオ エエ エエ エメ エエ エミ メ エエ エエ さす 


スタ イル シー ト を 利用 し て 同様 に 枠 線 の 有無 や 太 さ を 指定 する 場合 は 、 一 例 と し て 次 の よう に な り ま す 。 
width、height、alt 属性 に つい て は 紙面 の 都合 で 省略 し て いま す 。 ス タイ ル シ ー ト に つい て 詳し く は 本 書 
姉妹 書 「 ス タイ ル シ ー ト 秋 典 第 3 版 」 を 参照 し こく だ さい 。 


<D> 

<a hre 仁 ".…/test.html"><img src="birds3.jpg” style="border-width:0"></a> 
<imdq src="birds3.jpg” style="border-width:medium"> 

<img src="birds3.jpg' style="border-width:10px"> 

</P> 


COOLKKLAKILILIANLIIAIKKAKKLELEIKEKNKNKIKIIILKIIIIEIEEKKIKIEERKRKRXRXS 


1 1 1 二 和 ]】 1 ココ NN4 MC 完 4 に ルス 
O O O O O 


リン グ し た いて … ド ドド ドド ドド ドド に .146 
リン ク を 設定 p 


剛 ID73OUNMM AI ま NIR YNS NN 3 


O 〇 O 
〇 








ヨコ ミコ ピリ: コリ 


<1md src=" 廊 " align=" 近 "> 





太 *eees 画 像 ファ イル 名 (URL) 
支 weseeetop、middle、bottom 





通常 、 画 像 は 前 後 の テ キス ト と 一 緒 に 、 ひ と つの 行 の 中 に 配置 され ます 。align 属性 を 使用 する 

と 、 そ の 際 の 画像 と テキ スト の 並べ 方 を 指定 する こと も で きま す 。 

top 画像 の 上 部 と 周囲 の テ チキ スト の 上 部 を 揃え る 

middle 画像 の 中 央 と 周囲 の テキ スト の ベー スラ イン を 揃え る 

bottom 画像 の 下部 と 周囲 の テキ スト の ベー スラ イン を 揃え る (デフ ォ ル ト ) 

画像 を ひと つの 行 に 含め る た め 、 当 然 の こと な が ら そ の 前 後 の テ キス ト も 1 行 分 し か 表示 され 

ませ ん 。 1 行 に 収まり きら な い 長 い 文章 な ど は 画像 の 下 に 送ら れ ます 。 画像 の 隣 に 複数 行 の テキ ス 
ト を 並べ た いと き は 、left、right (次 項 参照 ) を 指定 し ます 。 
1 
<D> 
<imd src="birds3.jpg" width="200" height="200" align="top" alt=""> 
top を 指定 
</P> 
<D> 
<imdq src="birds3.jpg" width="200" height="200" align="middle" alt=""> 
middle を 指定 
</D> 
<D> 
<imdg src="birds3.jpg" width="200" height="200" align="bottom" alt=""> 
bottom を 指定 
</P> 


ツー ミユ 











画像 は イン ライ ン レ ベル 要素 CCCCCCCUCCLCCUUCLEKTECCCOCCCKKECCCTKYEETYCCCOYD sss 


画像 は 通常 前 後 の テ キス ト と 同じ 行 の な か に 配置 され ます 。 逆 に いえ ば 、 画像 の サイ ズ に 関係 な く 、 そ 
の 前 後に 表示 され る テキ スト は 1 行 の み で す 。 こ れ は img 要素 が ひと つの 行 の な か に 含ま れる 、 イ ン ラ イ 
ン レ ベル 要素 と よ ば れる も の だ か ら で す (D.4 参照 )。 
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で ー* ユ 


CSS に よる テキ スト と の 並び 方 の 指定 し に ルス オオ ミネ ミミ ミミ ネオ ミオ ミオ KIMIIIKNRRRRRRRARXRRSI 


スタ イル シー ト を 利用 し て 同様 に テキスト と の 並び 方 を 指定 する 場合 は 、 一 例 と し て 次 の よう に な り ま 
す 。width、height、alt 属性 に つい て は 紙面 の 都合 で 省略 し て いま す 。 ス タイ ル シ ー ト に つい て 詳し く は 
本 書 姉 妹 書 「 ス タイ ル シ ー ト 箇 典 第 3 版 」 を 参照 し こく だ さい 。 


<style type="text/css"> 

社 op tvertica-align:top} 

#middle {verticaLalign:middle] 

#ottom {verticaLalign:bottom} 

</style> 

<body> 

<P><imd src="birds3.jpg' 1d="top">toD を 指定 </p> 
<P><imd src="birds3.jpg" id="middle">middle を 指定 </p> 
<P><imd src="birds3.jpg' id="bottom ">Dottom を 指定 </p> 





</body> 
の GS は ぶな や イド チル リト が 219 
IE 3 IE5.5 上 3 NN4 NN4.7 。 NG6.2 
O O O O O O O 
画像 に テキ スト を 回 り 込 ませ た い ……・…………… p186 








テキ スト を 回 り 込ま せ た い 


WW A_W 


<img src=" 文 "aign=" 均 "> 









Xe 画像 ファ イル 名 (URL) 
weeessleft、right 






align 属性 で left も し く は right を 指定 し 、 ブ ラウ ザ の 片端 に 画像 を 配置 する よう に する と 、 そ 
の 画像 の 反対 側 に 複数 行 の テキ スト を 置く こと が 可能 に な り ま す (回 り 込 み )。 


left 画像 を 左側 に 寄せ 、 右 側 に テキ スト を 置く 

right 画像 を 右側 に 寄せ 、 左 側 に テキ スト を 置く 
つま り 、left を 指定 する と 画像 が 左端 に 寄り 、 そ の 右側 に テキ スト が 回 り 込み 、right で は その 逆 
と な り ま す 。 


画像 の 反対 側 に 収まり きら な か っ た テキ スト は 、 画 像 の 下方 に 送ら れ ま す 。 


<D テ > 

<img src="birds3.jpg" width="170" height="170" align="left"' alt=""> 

align 属性 で lett も し く は right を 指定 し 、 ブ ラウ ザ の 片端 に 画像 を 配置 する よう に する と 、 そ 
の 画像 の 反対 側 に 複数 行 の テキ スト を 置く こと が 可能 に な り ま す (回 り 込み )。…… (中 略 ) 
Mae 画像 の 下方 に 送ら れ ま す 。 <br> 

width 属性 と height 属性 は 、…… (中 略 ) …… 読者 の みな さん の 声 が 聞い て みた いで す 。 
<br clear="all"> 

</p> 

<hr> 





<D テ > 

<img src="birds3.jpg" width="170" height="170" aign="right" at=" リ > 
align 属性 で left も し く は right を 指定 し 、 ブ ラウ ザ の 片端 に 画像 を 配置 する よう に する と 、 そ 
の 画像 の 反対 側 に 複数 行 の テキ スト を 置く こと が 可能 に な り ま す (回 り 込み )。…… (中 略 ) 
Voe 画像 の 下方 に 送ら れ ま す 。<br> 

width 属性 と height 属性 は 、…… (中 略 ) …… 読者 の みな さん の 声 が 聞い て みた いで す 。 


</D> 











136 画像 に テキ スト を 回 り 込 ませ た い 


テ ぴ の! !A3 8E ス DP 


@ 〇 = の 同人 の の we 実 so 電 な の の 6 


mlign 属 性 で left も し く は right を 指定 し 、 ブラ ウザ の 片端 に 画像 を 配置 する よう に 
する と 、 そ の 画像 の 反対 側 に 複数 行 の テキ スト を 置く < こと が 可能 に な り ま す 
(回 り 込み ) . left を 指定 する と 画像 が 左端 に 寄り 、 その 右側 に テキ スト が 回 り 
込み ます . right で は その 逆 で す . 画像 の 反対 側 に 収まり きら な か っ た テキ スト 
は 、 画像 の 下方 に 送ら れ ます 。 
dth 属 性 と height 属 性 は 、 画像 の サイ ズ を 指定 し ます 。 必ず 書か な けれ ば い 
ナ な い 属 性 で は あり ませ ん が 、 書い て お いた ほう が 読み 込み が 早く な り ま す . 
代替 文字 を 設定 する al 属性 は 必ず 書く 決ま り に な っ て いま す . 
それ に し て も 毎回 こう いう 文章 を 考え る の は 大 変 で す . サン ブル 用 の 文章 と いう の は 、 も っ と まじ め 
な ほう が いい の で し ょ うか . も っ と 遊ん で いて も いい の で し ょ うか 。 ネタ 探し を し な が らい つも 悩ん で 
し まい ます ., 読者 の みな さん の 声 が 聞い て みた いで す 。 


align 属 性 で left も し く は right を 指定 し 、 ブラ ウザ の 片端 に 画像 を 配置 する よう に 

する と 、 その 画像 の 反対 側 に 複数 行 の テキ スト を 置く < こと が 可能 に な り ま す 

(回 り 込み ) . lst を 指定 する と 画像 が 左端 に 寄り 、 その 右側 に テキ スト が 回 り 

込み ます 。 right で は その 逆 で す . 画像 の 反対 側 に 収まり きら な か っ た テキ スト 

は 、 画像 の 下方 に 送ら れ ます . 

width 属 性 と height 属 性 は 、 画像 の サイ ズ を 指定 し ます 。 必ず 書か な けれ ば い 

け な い 属性 で は あり ませ ん が 、 書い て お いた ほう が 読み 込み が 早く な り ま す 。 

代替 文字 を 設定 する alt 属 性 は 必ず 書く 決ま り に な っ て いま す 。 

それ に し て も 毎回 こう いう 文章 を 考え る の は 大 変 で す . サン プル 用 の 文章 と いう の は 、 も っ と まじ め 
な ほう が いい の で し ょ うか . も っ と 遊ん で いて も いい の で し ょ うか . ネタ 探し を し な が らい つも 悩ん で 
し まい ます . 読者 の みな さん の 声 が 聞い て みた いで す . 














の 作 ef < は 7 を 指定 し ブラ ウザ の 上 人 に 画 人 を 寺 す る よう (こす 
Me ee 際 Z559 く こと が 困 能 に な り ます (回 りみ) 
ch 指定 する と 男 像 が た: 蘭 に 共 り て の 世 側 に テキ スト 回 り X み ます で は そ 
9 で です. 画像 の 反対 介 に 収まり きら な か っ た テキ スト は . 画像 の トカ に 送ら れれ ま 


上 作 と hot 周作 は 四 像 の サイ ズ を 指定 し ます 。 必ず 書か な けれ ば いけ な い 


性 で は あり ま 書い て お いた ほう が 
する alt 属 性 は うたい MD 
に し で いう 信 宮 を 考え る の は 大 変 で す 。 サン ブル 用 の 文章 と いう の 
は 、 も っ と まじ め な ほう が いい の て し ょ うか 。 も っ と 遊ん で いて も いい の で し ょ うか , ネタ 探し を し な が らい つ 
も 人 悩 ん で し まい ます . 読者 の みね さん の 声 が 聞い て みた いで す 。 


0 の びり まあ 代替 文字 を 設 





5 性 で et し は rg を 定 し 。 ブラ ウザ の 人 科 に 人 を 人 す みう ( に する 
の 直人 の 人 側 に 析 雪 生 の テキ スト を 書く こと が 可能 に な り ます (回 リ 込み 

oe 人 する と 画像 が 左端 に 寄り 、 その 右側 に テキ スト が 回 り 込み ます 。 
の で す 。 画像 の 反対 側 に 収まり きら な か っ た テキ スト は 、 画 の 下方 に 送ら れ ま 


性 と height 属 性 は 、 画像 の サイ ズ を 指定 し ます . 必ず 書か な けれ ば いけ な い 
人 あり ませ ん が 書い て お いた ほう が 読み 込み が 早く な り ます . 代替 文字 を 設 
定 する alt 属 性 は 必ず 書く 決ま り に な っ て いま す . 
それ に し て も 回 に うし いう 如 を 考え る の は 大 変 です. サン ブル 用 の 文章 と いう の 
は 、 も っ と まじ め な ほう が いい の で し ょ うか . も っ と 遊 ん で いて も いい の で し ょ うか . ネタ 探し を し な が らい つ 
も 悩ん で し まい ます . 読者 の みね さん の 声 が 聞い て みた いで す 。 

















1 ギ 】 IE5 1 二 誠 ) 1 コ ゴ MC NN4.7 ド に ル 4 
O O O O O O (9) 
画像 に 対す る 回 りら 込み を 解除 し た い ………・………… p.138 
テキ スト に 対す る テー ブル の 位置 を 指定 し た い ……p.20g 


EE 





ヨッ: コッ 9 ョ コリ 隔 


<br clear=" 友 "> 





文 seeeesall、left、right 





テキ スト の 回 り 込み (前 項 ) を 解除 し て 、 そ れ 以 降 の テキ スト は 画像 の 下 の 行 か ら 続け た いと 
き は 、<br> タグ に clear 属性 を 指定 し ます 。 値 と 効果 は 次 の と お り で す 。 
left 画像 が 左側 に ある と き (<img src=" 文 " align="left">) の 回 り 込み を 解除 
riqght 画像 が 右側 に ある と き (<img Src=" 太 " align="right">) の 回 り 込 み を 解除 
al どちら の 場合 に も 有効 


<PD> 

<1mq src="birds3.jpg" width="170" height="170" aign="left" alt=""> 
align="left" を 指定 する と 画像 が 左側 に 配置 され 、 そ の 右側 に テキ スト が 回 り 込み ます 。 画像 
の 隣 に 収まり きら な い テ キス ト は 、 そ の 下 に 送ら れ ま す 。 

<br clear="left"> 

clear="left" を 指定 する と 回 り 込み が 解除 され ます 。align="right" の 場合 は clear=*right" を 指定 
し て くだ さい 。align="al" は どちら の 場合 に も 有効 で す 。 

</D> 


v こ っ 








委 西 健 に 対す る 回 り 込み を 衣 際 し た い - Microsoft internet Explorer 
ファ イル ⑥) 編集 表示 ⑦ お 気 に 入 D⑯ ウール ①D ヘル プ ⑪⑬ 


@②・ の 回 還付 の ws 支 bwp 還 の の ララ 回 ・』 


lign=”left "を 指定 する と 画像 が 左側 に 配置 され 、 そ の 右側 に テキ スト が 
本 画像 の 隣 に 収まり きら な い テ キス ト は 、 そ の 下 に 送ら れ ま 


clear="left を 指定 する と 回 り 込 み が 解 除 さ れ ま す 。 align=”nght" の 場合 は clear="nght" を 指 
定 し て くだ さい . align="all"' は どちら の 場合 に も 有効 で す 。 





インタ ーネット 














上 str を 持 正 する と 下 人 が に 配 加 さ れ 、 そ の 古 側 に テキ フ ト か 何 り 込 
1 画像 の 隣 に 収まり きら な い テキ スト は 、 そ の 下 に 送ら れ ま す 


に aligr="night" の 場合 は clear="right を 指定 し て 


= left を 指 入 
半 aligr= al "は どちら の 場合 (に も 有 和 で 





CSS に よる 回 り 込み の 解除 スス スス ミミ ミス トミ ミス ミミ ミミ ミス ミミ ミミ ミス ミミ スミ ミス ミミ スミ ミミ ミス ミス ミミ ミミ ミス ョ 」 よ ポ ま 】 


スタ イル シー ト を 利用 し て 同様 に 回 り 込み の 解除 を する 場合 は 、 一 例 と し て 次 の よう に な り ま す 。 
width、height、alt 属性 に つい て は 紙面 の 都合 で 省略 し て いま す 。 ス タイ ル シ ー ト に つい て 詳し く は 本 書 
姉妹 書 「『 ス タイ ル シ ー ト 秋 典 第 3 版 」 を 参照 し こく だ さい 。 


<style type="text/css"> 
brimg 人 clear:left] 


</style> 

<body> ィ 
<D> ィ 
<imd src="birds3.jpg" ahign="left"> ジ 


align="left" を 指定 する と 画像 が 左側 に 配置 され 、 そ の 右側 に テキ スト が 回 り 込 み ま す 。 画像 の 隣 に 収まり きら 
な い テ キス ト は 、 そ の 下 に 送ら れ ま す 。 

<br id="img"> 

回 り 込み を 解除 する と こん な ふう に な り ま す 。 

















</p> 
</body> 
oooeeeeoeooeoeeeeeeeeeeeoSeoeeeeSeeooeoeee る ooo も eeeeoeeeeoee 
1】 1 主 】 1 王 二 】 1 ミコ NN4 NN4.7 ド に ルコ 
O O O O O O O 
時 銚 に テキ スト を 回 り 込 ませ た い …ーーー………ー p.136 
レコ テー ブル に 対す る 回 り 込み を 解除 し た い ・……・…・…・ p.205 








リコ ヨコ コツ: コリ 


<1mq src=" 文 " vspace=" 金 "hspace=" 〇 "> 





文 *eees 画 像 ファ イル 名 (URL) 
$ す 画像 ファ イル に 対す る 上 下 の 評 白 (ビク セル ) 
ee 画像 ファ イル に 対す る 左右 の 余白 (ビク セル ) 


Ear oz 





画像 の 周囲 に スペ ー ス を 空け た い 場 合 に 使用 し ます 。vspace は 縦 方 向 の 、hspace は 横 方 向 
の 空き を 画像 に 対し て 設定 し 、 ど ちら も ピク セル で 記述 し ます 。 


<D> 

simg src="birds3.jpg" width="200" height="200" align="left" vspace="25" 
hspace="50" alt=""> 

align 属性 で let も し く は right を … (中 略 ) … 決 まり に な っ て いま す 。 

</P> 


ツー ミユ 











強 画 修 と テキ スト の 間隔 を 指定 し た い - Microsoft mternet Explorer 
アイ ル ⑥) 編集) 表示) お 気に入り ⑳ ツー ル ① へ ルフ 0⑬ 


@s 6 回 回 全 の 誠 pmcAo 人 な の の は ・ あ 回 ・』 


align 属 性 で left も し く は right を 指定 し 、 ブラ ウザ 
の 片端 に 画像 を 配置 する よう に する と 、 そ の 画 
像 の 反対 側 に 複数 行 の テキ スト を 置く こと が 可 
能 に な り ま す ( 回 り 込み ) 。 left を 指定 する と 画 
- ょ 像 が 左端 に 寄り 、 その 右側 に テキ スト が 回 り 込 
ます 。 right で は その 逆 で す 。 画像 の 反対 側 
収まり きら な か っ た テキ スト は 、 画像 の 下方 
に 送ら れ ま す 。 
width 必 性 と height 属 性 は 、 画像 の サイ ズ を 指 
定 し ます 。 必ず 書か な けれ ば いけ な い 属 性 で 
|25 ビ クセ ル | は あり ませ ん が 、 書い て お いた ほう が 読み 込み 
が 早く な り ま す 。 代替 文字 を 設定 する alt 属 性 は 必ず 書く 決ま り に な っ て いま す 。 











牧 イン ター ネッ ト 
人 画像 と テキ スト の 間 に 上 下 25 ピク セル 、 左 右 50 ピク セル の 間隔 が めき ます 











align 属 性 で left も し く は ni を 指定 し 、 Pe 
の に 軸 を 計る 

の 画像 の 
全く に お りす CE 
lst を 指定 する と 画像 が 左端 に 


ーー 込み ます 。 right で 
す 画像 の 反対 仙 に 収まり きら な 
つた み キ スト は 画像 の 下方 に 送ら れ ま 


す . 
に 生ん な す 画像 の サイ ズ を 
指定 し ま す . 必ず 書か な けれ ば いけ な い 必 
読み 込み が 早く な り ます . 代替 文字 を 設定 
する ah 属性 は 必ず 書く 決ま り に な っ て し \ ま す 。 


ドキ ュ メ ント : 完 了 (⑫264 秒 》 
A 画 像 と テキ スト の 間 に 上 下 25 ピク セル 、 左 右 50 ピク セル の 間隔 が めき ます 











CSS に よる 画像 と テキ スト の 間隔 の 指定 ミド ミエ トト トミ ミミ ミミ ミミ すす まま 】 ULLEKTLLAEKREERIEKISE】 CH 


スタ イル シー ト を 利用 し て 同様 に 画像 と テキ スト の 間隔 を 指定 する 場合 は 、 一 例 と し て 次 の よう に な り 
ます 。width、height、alt 属性 に つい て は 紙面 の 都合 で 省略 し て いま す 。 ス タイ ル シ ー ト に つい て 詳し く 
は 本 書 姉 妹 書 スタ イル シー ト 秋 典 第 3 版 」 を 参照 し こく だ さい 。 


ペー ミユ 


<style type="text/css"> 

img {margin:25px 50px} 

</style> 

<body> 

<D> 

<img src="birds3.jpg"> 

align="left" を 指定 する と … (中 略 ) … 決 まり に な っ て いま す 。 
</Pp> 

</body> 


PVYYYYTCCKKKKKLKLLYLLKELLKLLLILLLRIKLRLIRRRRRRLLRRLIILIRLKLKRIRRRREKLERRKS ミ SKKSINNI】 








1 1 1 士 寺 -】 1 ヨコ NN4 ドド C 守 4 ド に ルコ 
O O O O O O 〇 
参照 画像 に テキ スト を 回 り 込 ませ た い ・…・ ……p.136 
人 め ” 画像 に 対す る 回 り 込み を 解除 し た い ・ …"p.138 


VINO200N 141 








<1md src=" 友 "usemap="# 反 "alt=" マ リ > 
<map name=" 六 "> や </map> 


<area shape=" 金 " coords=" の "href =" マ "at=" マ "> 





文 *eees 画 像 ファ イル 名 (URL) 

壇 eeee マ ッ プ 名 

ご ・…… 画 像 の 代わ り の テキ スト 

eeeedefault、rect、circle、poly 
se 座標, 座標 .… (ピク セル ) 

マリ ンク 先 の URL 





イメ ー ジ マッ プ の 機能 を 利用 する と 、 ひ と つの 画像 に 複数 の リン ク を 設定 する こと が で きま す 。 
ここ で 説明 する クラ イア ント サイ ドイ メー ジマ ッ プ は すべ て の 処理 を ブラ ウザ 側 で 実行 する も の 
で 、HTML タグ だ け で 作成 で きま す 。 

<img SrC=" 廊 "USemaD="# 反 "> で は 、 ク ライ アン ト サ イ ドイ メー ジマ ッ プ 機能 を 使用 する 
こと 、 そ し て その 際 ど の 画像 を マッ プ と し て 使用 する か を 指定 し ます 。 に は マッ プ の 名 前 を 任 
意 に 付け ます (半角 英 数 字 の み )。 

<map name=" 丸 "> と </map> で は 、 画 像 が クラ イア ント サイ ドイ メー ジマ ッ プ で ある こと 
を 定義 むる と と も に 、 そ の イメ ー ジ マッ プ に 名 前 を 付け ます (上 で 説明 し た よう に 、<img> タグ 
か ら イ メー ジマ ッ プ の 画像 を 参照 する と き に この 名 前 を 使用 し ます )。 

そし て 、 実際 の リン ク 機 能 は <area> タグ と 以下 の よう な 属性 で 設定 し ます 。 

Shape 属性 は 画像 上 で マッ プ と し て 定義 され る 領域 の 形 を 指定 し ます 。 





default 全体 
rect 四角 形 
circle 円 
poly 多角 形 


Coords 属性 は 領域 の 座標 で す 。 数 値 や 順序 は shape 属性 で 定義 し た 形 に よっ て 下記 の よう に 
異な り ま す が 、 い ずれ も ピク セル で 指定 し 、 各 座標 は 「,」 (カン マ ) で 区 切り ます (次 ペー ジコ ラ 
ム 参 照 )。 

rect の 場合 左上 の X 座 標 , 左上 の Y 座 標 , 右 下 の X 座 標 , 右 下 の Y 座 標 

circle の 場合 中 心 の X 座 標 , 中 心 の Y 座 標 , 半径 

poly の 場合 すべ て の 角 の 座標 を 「X 座 標 , 座標 」 の 順 で 指定 し 、 最 後 は 最初 の 座 
標 と 同じ 値 を 指定 し 、 多 角形 を 閉じ る 





さも 





そし て 、href 属性 で は リン ク 先 の url を 指定 し ます 。 
な お 、HTML4.01 か ら alt 属 性 (p.128 参照 ) も 必ず 指定 する こと に な っ て お り 、 ク ライ アン 
ト サ イ ドイ メー ジマ ッ プ で は <img> タグ と <area> タグ の 両方 に alt 属性 を 記述 し ます 。 


coordis 属性 の 設定 方 法 し オミ スミ トメ トミ オ ミミ ミミ ミミ ミミ メ ミミ ミミ ミオ ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ SEIEKKEKSEKEXARA】 


coordS 属性 の 指定 方 法 を まとめ る と 以下 の よう に な り ま す 。 





shape="rect" shape="circle" shape="poly" 
coords="ab,c,d" coords="a,b,c" coords="a,b,c,d,e,fa,b" 


POKERRKRKAKAMKSESKKKKKKKAKAAKKKKKKLKAKARRIRIEIRRRRIRRRYIIRKIIIKIKINKMYMX 


ぐ ョ > タグ に よる 償 域 の 指定 し エナ メメ オミ ミミ ミミ ミミ ミミ ミミ メメ メメ トミ MIIIEEKIKEKIEKEIKKIEKKKEKSYI】 


W3C で は <area> タグ の 代わ り に 、<a> タグ の 使用 を 推奨 し て いま す 。 こ の 方 法 を 使え ば 画像 を 表示 
で き な い ブラ ウザ で アク セス し た と き に 、<a> と </a> タグ の 間 に 設定 され た テキ スト 部 分 を リン クア ン 
カー と し て 表示 で きる よう に な り ま す 。 


POURKKLKESKRKRXKXXKXXXXKXKKKAKERRKRRKRKKRRKRRRRRRERRRRRRRRRRRSI 


みた ゴ アス アル アル ソノ) | し スス オオ ネオ ミミ ミミ ミミ ミミ ミミ ミミ ミス ミオ オミ ミミ ミミ ミミ ミミ ミミ ミスミ ミミ ミミ メ ミミ メメ ミミ メ ミミ スミ 】 


イメ ー ジ マッ プ と は 、 ひ と つの 画像 に 複数 の リン ク 先 を 設定 で きる 技術 で 、 処 理 の し か た に よっ て 次 の 
2 種類 が あり ます 。 

クラ イア ント サイ ドイ メー ジマ ッ プ 

ユー ザー が クリ ッ ク し た 領域 に 設定 され た リン ク を ブラ ウザ が 判別 し 、 実行 し ます 。 処理 を すべ て ブラ 
ウザ 側 で お こ な う も の で 、HTML タグ の み で 作成 する こと が で きま す 。 

サー バー サイ ドイ メー ジマ ッ プ 

ユー ザー が クリ ッ ク し た 領域 の 座標 を サー バー 側 に 置か れ た CGI ブロ グラ ム に 送信 し 、 そ こ で リン ク 
先 の 判断 な どの 処理 が 行わ れ ま す 。 


クラ イア ント サイ ドイ メー ジマ ッ プ の ほう が CGI プロ グラ ム な ど を 必要 と し な い 分 、 作 成 は 簡単 で す 。 
また 、 画 像 を 表示 で き な い ブラ ウザ に も 代替 テキ スト に よっ て 対応 が 可能 な こと な どか ら も 、 現在 で は ク 
ライ アン ト サ イ ドイ メー ジマ ッ プ の 利用 が 推奨 され て いま す 。 


OYK は EXKKKKLLALAKAKREKLKKXKKKKKKAKAAIIKNKXAXAXKAXYAKXXAXYXXSKSSSS 


ツー* ユ 
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<P> 
</D> 


<D> 

=img src="catband.jpg" width="450" height="300" border="0" 

usemap= "#catbandmap" alt=" イ メー ジマ ッ プ の サン プル 画像 "> 

<map name="catbandmap"> 

<area shape="rect" coords="40,40,120,235" href= "violin.html' alt=" バ イオ 
リン 担当 "> 

<area shape="rect" coords="180,45,290,280" href="flute.html" alt=" フ ルー 
ト 担当 "> 

<area shape="poly" coords="300,40,400,0,440,100,440,270,320,270,300,40" 
href="contrabass.html" alt=" コ ント ラバ ス 担 当 "> 

</map> 

</D> 


</center> 








ソー ス の 分 析 OUCLCMULLKKKKKXLKXKYKIKIKYYTYYYKXYTD RODCLPCLELEKKYTEKYELKLYLKTEI) 


この サン プル ソー ス の マッ プ の 領域 と 座標 は 下図 の よう に な り ま す 。 
(400,0) 


MIUUIRIIl 
リリ リリ ルン ルン / 









(290,280) 








当 イメ ー ラ マッ プ を 作り た い - Micrpsoft internet Explorer 
アイ ル (E) 編集) 表示 お 気に入り ウー ル ① へ ルプ ⑪ 


9 応 ・@・ 還付 の 内 実 smA0 休 テ 7 の 名 - 還 ・|J 











の イン ター ネッ ト 











人 この 部 分 を クリ ッ ク す る と flute.html ヘリ ンク し ます 











IE6 NN4 NN4.7 が に ル 】 
O 〇 O 較 O O O O 














<a href=" 友 "> や </a> 





太 seeeeeURL 





任意 の テキ スト や 画像 に リン ク を 設定 し ます 。 娘 に は 移動 先 の URL (ファ イル 名 ) を 記入 し ま 
す 。URL は 、 現在 の ファ イル と の 位置 関係 を 考え て 、 絶 対 URL か 相対 URL を 決め て くだ さい 。 


<D> 

<a href="http://www.shoeisha.com/"> 

<img src="ballLgif" width="12" height="12" alt="" border="0"> 
株 式 会 社 翔 泳社 の ペー ジ </a> 


</D> 

<D> 

<a href="http://www.ank.co.jp/index.html"> 

<imd src="ball.q1f" width="12" height="12" alt="" border="0"> 
株 式 会 社 ア ンク の ペー ジ </a> 

</P> 











強 リン カ な 該 定 し た いい - MMicrosoft Imternet Explorer 
表示 お 気 に 入 D⑩ ウール へ ルプ ⑬ 


回 国人 ぬ の 時 実 Bm 














人 画像 に 設定 され た リン ク 


CSS に よる 下線 を 表示 させ な い リ ンク の 設定 し ネオ メメ ミミ ミオ スミ ミミ ミミ スミ ミミ メ ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ まま 】 


一 般 的 な ブラ ウザ で は 、 リ ンク 部 分 に 下線 が 表示 され る よう に な っ て いま す 。 こ れ は ユー ザー の ブラ ウ 
ザ 設 定 次 第 で 変更 で きま す が 、 ペ ー ジ 作成 者 の 側 で この 下線 を 表示 させ な いよ うに する に は スタ イル シー 
ト の text-decoration:none を 指定 し ます 。 

一 例 と し て は 次 の よう に な り ま す 。 スタ イル シー ト に つい て 詳し く は 本 書 姉 妹 書 『 ス タイ ル シ ー ト 辞典 
第 3 版 」 を 参照 し こく だ さい 。 


<a href=" 娘 " style="text-decoration:none">ー </a> 





HOOUOOOLKXKYKYKKKKIKIKASKEIKKKKLKLIIILKKAKAKNIKEKLELKKLKLKKAKLKXXXYKAKXAXKXR 
1 1 1 主 た 】 1 コガ NN4 NN4.7 ド に ルコ 
O O O O O O O 

参 昭 絶対 URL と 相対 URL …… バ ーー ドー ドド ーー PD.10 テキ スト の 色 を 指定 し た い …… バ ドー ドー p.80 


皿 誠人 準 と な る URL を 指定 し た い ーー p88 リン ク を 利用 し て メー ル を 送信 し た い ……………・ p.158 





ささ ざこ ご 








<a href="# 友 "> や </a> 


<a name=" 友 "> </a> 





友 *eeooe キ ー ワ ー ド 





name 属性 で 、 ペ ー ジ 内 の 特定 の 位置 に ヴ ャ ンプ で きる よう に し ます 。 ひ と つの 文書 が 非常 に 
長い と き な ど に 有効 な 方 法 で す 。 

キー ワー ド を 決め 、 リ ンク 先 と する 位置 (ジャ ンプ する 位置 ) に <a name=" 娘 "> を 設定 し ま 
す 。 こ の 場合 の キー ワー ド は な ん で も よい の で す が 、 編集 する こと を 考え て わか りや すい も の を 
つけ た ほう が よい で し ょ う (半角 英 数 字 の み )。 た だ し 、 リ ンク 元 と リン ク 先 で は キー ワー ド を 一 
致 さ せ 、 同 じ キ ー ワ ー ド を 複数 箇所 に 使わ な いよ う 気 を つけ て くだ さい 。 

href 属性 の 値 に は 、 キ ー ワ ー ド の 先頭 に 「#] を つけ る こと も 忘れ ず に 。 


<body bgcolor="#33cc66"> 

<h1><a name="faq "> よく ある 質問 </a></h1> 

<D> 

ここ で は 、Web ペー ジ 作 成 に 関し て 寄せ られ る 質問 の うち 、 代 表 的 な も の を 集め て み ま し 
た 。 

</D> 

<ul> 

<li><a href="#html">HTML っ て 何で すか ? </a></li> 

<li><a href="#Drowser"> ブラ ウザ っ て 何で すか ? </a></li> 

<li> <a href="#editor">HTML エ ディタ っ て 何で すか ? </a></li> 

<li> <a href="#tooL">Web ペー ジ を 作る に は 何 が 必要 で すか ? </a></H> 
<li><a href=" 所 mg"> どん な 画像 が 使え ます か ? </a></l> 

<li><a href="#bbs"> 掲示 板 や チャ ッ ト は どう や っ て つけ る の で すか ? </a></H> 
<li><a href=" 折 -mode">i! モ ー ド 対応 HTML つて 何で すか ? </a></Hi> 

</ul> 


に スー 
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<hr> 


<h2><a name="html">HTML つて 何で すか ? </a></h2> 

<D> 

HTML と は HyperText Markup Language (ハイ パー テキ スト マー クア ッ プ 言語 ) の 略語 で す 。 
タグ と いわ れる 手段 を 使っ て テキ スト に 文書 の 構造 や 修飾 情報 な ど を 追加 し 、 コ ンピュータ 
が 情報 を 読め る よう に する 言語 の こと で す 。 こ の 言語 を 使っ て 記述 され た HTML ファ イル を 
ブラ ウザ (Web ブラ ウザ ) で 読み 込む こと で 、Web ペー ジ と し て 閲覧 で きる よう に な り ま 
す 。<br> 

HTML は 一 定 の 決ま り に 沿っ て 記述 する 性 質 の も の な の で 、 基 本 を 理解 すれ ば 、 比 較 的 容易 
に HTML ファ イル を 作成 する こと が で きま す 。<br> 

HTML は 現在 、W3C (World Wide Web Consortium) と いう 団体 に よっ て 標準 化 が 行なわ れ 
て いま す 。 現在 使用 され て いる HTML は バー ジョ ン 4.01 で す 。 

</P> 

<div align="right"><a href="#faq ">【 戻 る 】</a></div> 


<hr> 

<h2><a name="browser"> ブラ ウザ っ て 何で すか ? </a></h2> 

<D> 

Web ペー ジ を 閲覧 する た め の 、 ソ フト ウェ ア の こと で す 。<br> 

代表 的 な ブラ ウザ に Microsoft の Internet Explorer と Netscape Communications の Netscape 
(Navigato) が あり ます 。 こ の 2 大 ブラ ウザ を は じ め と する 多く の ブラ ウザ で は 画像 も 扱え ま 
す が 、 テ キス ト し か 表示 で き な い ブラ ウザ も あり ます 。 ま た 、 各 ブラ ウザ が 独自 に 拡張 し た 
タグ 、 独 自 性 の 強い 技術 な ど を 利用 する と 、 対 応 し て いな い ブ ラウ ザ で は ペー ジ が うま く 表 
示さ れ な い 場 合 が あり ます 。Web ペー ジ を 作成 する 際 に は た くさ ん の ブラ ウザ が 存在 し て 
いる こと を 忘れ な いよ うに し まし ょ う 。 

</P> 

<div align="right"><a href="#faq">【 戻 る 】</a></div> 














に スー 
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リ 
ン | 人 る 同 一 ペー ジ 内 で リン ク し ます 
ク 


150 場所 を 指定 し て リン ク し た い その 1 


























^ ム この よう に 長い ペー ジ で 有効 な リン ク で 








人 同一 ペー ジ 内 で リン ク し ます 








さき ざこ 











場所 を 指定 し て リン ク し た いそ の 1 151 


<a href=" 衣 # 近 "> て </a> リン ク 元 
<a name=" 之 "> で </a> リン ク 先 





文 *eseee リ ンク 先 の URL 
芝 see キー ワー ド 





リン ク 元 を 設定 する タグ の キー ワー ド の 前 に リン ク 先 の URL を 指定 する と 、 ほ か の ペー ジ の 特 
定 の 位置 ジャ ンプ する こと が で きま す 。 

キー ワー ド を 決め 、 リ ンク 先 と する 位置 (ジャ ンプ する 位置 ) に <a name=""> を 設定 し ま 
す 。 こ の 場合 の キー ワー ド は な ん で も よい の で す が 、 編 集 す る こと を 考え て わか りや すい も の を 
つけ た ほう が よい で し ょ う (半角 英 数 字 の み )。 た だ し 、 リ ンク 元 と リン ク 先 で は キー ワー ド を 一 
致 さ せ 、 同 じ キ ー ワ ー ド を 複数 箇所 に 使わ な いよ う 気 を つけ て くだ さい 。 

href 属性 の 値 に は 、 キ ー ワ ー ド の 先頭 に 「#] を つけ る こと も 忘れ ず に 。 





<h1><a name="faq"> よく ある 質問 </a></h1><br> 

<PD> 

ここ で は 、Web ペー ジ 作 成 に 関し て 寄せ られ る 質問 の うち 、 代 表 的 な も の を 集め て み ま し 
た 。 

</P> 


に ュー 


<ul> 

<li><a href= "cont.htm#html">HTML っ て 何で すか ? </a></li> 

<i><a href="cont.htm#browser"> ブラ ウザ っ て 何で すか ? </a></li> 

<li> <a href="cont.html#editor">HTML エ ディ タ つ っ て 何で すか ? </a></li> 
<li><a href="cont.htmHtooU">Web ペー ジ を 作る に は 何 が 必要 で すか ? </a></1> 
<li><a href="cont.htmlHimq "> どん な 画像 が 使え ます か ? </a></Hi> 

<li><a href="cont.htm#bbs"> 掲示 板 は どう や っ て つけ る の で すか ? </a></li> 
<li><a href="cont.html 所 -mode ">i モ ー ド 対応 HTML っ て 何で すか ? </a></lHi> 
</ul> 

<hr> 
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<P> 

[ <a href="../index.html">HOME</a> 〕 
</D> 

</body> 











リン ク 先 の comt.himil 
<body bgcolor="#66ccff"> 


<h1> よく ある 質問 </h1> 
<hr> 


<h2><a name="html">HTML っ つて 何で すか ? </a></h2> 

<D> 

HTML と は HyperText Markup Language (ハイ パー テキ スト マー クア ッ プ 言語 ) の 略語 で す 。 
タグ と いわ れる 手段 を 使っ て テキ スト に 文書 の 構造 や 修 分 情 報 な ど を 追加 し 、 コ ンピュータ 
が 情報 を 読め る よう に する 言語 の こと で す 。 こ の 言語 を 使っ て 記述 され た HTML ファ イル を 
ブラ ウザ (Web ブラ ウザ ) で 読み 込む こと で 、Web ペー ジ と し て 閲覧 で きる よう に な り ま 
す 。<br> 

HTML は 一 定 の 決ま り に 沿っ て 記述 する 性 質 の も の な の で 、 基本 を 理解 すれ ば 、 比 較 的 容易 
に HTML ファ イル を 作成 する こと が で きま す 。<br> 

HTML は 現在 、W3C (World Wide Web Consortium) と いう 団体 に よっ て 標準 化 が 行なわ れ 
て いま す 。 現在 使用 され て いる HTML は バー ジョ ン 4.01 で す 。 

</D> 

<div aign="right"><a href="faq_menu.htmH#faq">【 戻 る 】 </a></div> 


さこ 


<hr> 

<h2><a name="browser"> ブラ ウザ っ て 何で すか ? </a></h2> 

<D> 

Web ペー ジ を 閲覧 する た め の 、 ソ フト ウェ ア の こと で す 。<br> 

代表 的 な ブラ ウザ に Microsoft の Internet Explorer と Netscape Communications の Netscape 
(Navigator) が あり ます 。 こ の 2 大 ブラ ウザ を は じ め と する 多く の ブラ ウザ で は 画像 も 扱え 
ます が (後略 ) 
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人 人 他 ペ ー ジ の 特定 の 場所 ヘリ ンク し ます 





人 る この よう に 長い ペー ジ に 有効 な リン ク で す 








人 人 他 ペー ジ の 特定 の 場所 ヘリ ンク し ます 


に い ム ュー 


全 こ の よう に 長い ペー ジ に 有効 な リン ク で す 








IE! IE5 IE5.5 3 RT NTT2 N6.2 
O O O O O O O 
場所 を 指定 し て リン ク し た い その 1 ーー… p.148 





ざさ ざ ご こ 
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<a href=" 友 "target=" 近 "> て </a> 





廊 eeees リ ンク 先 の URL 
wweees blank 





通常 の リン ク 指 定 で は 、 リ ンク 先 の 内 容 が リン ク 元 と 同じ ウィ ンド ウ 内 に 読み 込ま れ ま す が 、 
読み 込み 先 の ウィ ンド ウ を 指定 する target 属性 を 利用 し て 、 別 の ウィ ンド ウ に 表示 させ る こと も 
可能 で す 。 こ の 場合 は target 属性 に _blank を 指定 し ます 。_blank は 名 前 の な い ウ ィ ン ド ウ を 新 
し く 開 く 値 で す 。 ウィンド ウ の 開き か た を 決め る 規定 の 値 は ほか に も あり ます が 、 詳 し く は フレ 
ー ム の 項 (p.262) を 参照 し こく だ さい 。 





<D> 

<a href="bg1.html" target="_blank"> ク リッ ク す る と </a> 
背景 が 紺色 の ペー ジ が 開き ま す 。<br> 

( 別 ウ ィ ン ド ウ を 開き ます ) 

</P> 














































アン 委 新しい ウィ ンド ウ に リン ク 先 を 表示 し た い - Microsoft Internet Explorer 
デ イル) 編集 EC) 表示 び ) お 気 に 入 D⑩ ウール ① ヘル プ ⑪ 
> 2 
⑨ 率 ・⑨6 還付 の 丈 宮 pmA9 遇 な 7 の り 
ンド - 背景 が 紺色 の ペー ジ が 開き ます 。 
( 箇 衝 ン ドド ウ を 開き ます ) 
| ンド ウ に リン ク 先 を 表示 し た い - Microsoft Internet Explorer 回 回 
アイ ル (F) 編集) 表示 V) お 気に入り (⑯) ウー ル ①D ヘル プ ブ ⑪ 
*| 人 短 の sm 到 5m の 9 軸 テ 7 で 
| 
| 
| 
| 食 ペ ー ジ が 表示 され まし た イン ター ネッ ト 
| ^ 別 ウィ ンド ウ が 開き ます 
民 新しい ウィ ンド ウ に リン ク 先 を 表示 し た い - Netscape 6 回 回 | 
。 フ ァイル (F) 編集 (E) 表示 ( び ) 検索 ⑤ ジャ ンプ ⑯) ブッ クマ ー が B) 2① ヘル プ ⑪ 
Q③。 @ @ ⑲ Oorcoc (本 < ら 
背景 が 紺色 の ペー ジ が 開き ます 。 
| pos ンド ウ を 開き ます ) 
新しい ウィ ンド ウ に リン ク 先 を 表示 し た Netscape 6 
。 ア イル) 編集 (D 表示 ( び 検索 ⑮ ジャ ンプ ⑬ プッ マーク 2(B) 22D へ JI プ ⑪ 
| @⑨ @ Q⑳ @⑳ ok っ wm So 語 
| 
| 
| 
| 
| 
^ 別 ウィ ンド ウ が 開き ます 
1】 1 1 王 誠 】 1 ココ NN4 NINE 見 ト に ル 】 
基準 と な る URL を 指定 し た い ……………………… p.22 
リン ク を 読み 込む ウィ ンド ウ を 指定 し た い ……・…・- p.26 ら 
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さ ざ ご こ 





HTML4.01 規格 外 N | 


<a href="mailto:"> て </a> 





支 *eee メ ー ル アド レス 


リン ク の 設定 を 使っ て メー ル の 宛先 を 指定 する こと が で きま す 。 こ の 機能 に 対応 し た ブラ ウザ 
で あれ ば 、 リ ンク を クリ ッ ク す る と 、 ブ ラウ ザ 側 で 設定 され て いる メー ル 発 信用 の ウィ ンド ウ が 
起動 し ます 。 


S0URCE 
<D> 


この ホー ムペ ー ジ の 内 容 つ いて の ご 意見 ご 感想 は 


<a href="mailto:iwebmaster@abc.co.jp ">webmaster@abc.cojp</a> まで お 願い し 
ます 。 
</p> 






























リン カ を 利用 し て メ 


1 プ 】 
O 


当 リン ク を 利用 し て メー ル を 送信 し た い - Microsoft Imternet Explorer 


アイル) 編集 表示 () お 気に入り @⑯ 


GO の 同 還 の の 時 吉 5mwO9 軸 7 ケ 7 の 


直 ] mailtowebmaster@abc cojp 





ッ ー ル ① ヘルプ ⑪ 


イル 引 業 D 表示 ⑰ 失 和 ⑳ 書式 ⑦ ウー ル D セブ (⑯ へ ルプ ⑪ 








ュ | 











ル を 送信 し た い - Netscape 6 








人 指定 され た アド レス が 宛先 に 設定 され た メー ルウ ィ ン ド ウ が 開き ます 


1 1 王寺 1 ココ NN4 MC 4 が に ルス 
O O O O O O 





半 


問い 合わ せ 先 を 示し た い 


叉 フォ ー ム を メー ル で 送信 し た い ・… 














テー さい) 


<form action=" 太 " method=" 交 "enctype=" 多 "> て </form> 





文 *ee* デ ー タ の 送信 先 (URL) 
福 weeeee"get"、"post" (デー タ の 送信 方 法 ) 
K 】 seeeee デ ー タ を 送信 する 際 の MIME タイ プ 





ユー ザー 傘 入力 し て 送信 で きる フォ ー ム を 作成 する た め の 、 基 本 と な る タグ で す 。 
<form> 一 </form> は 、 こ の 範囲 が 入力 フォ ー ム で ある こと を 示し ます 。 フ ォ ー ム の 送信 先 や 
送信 方 法 な ども この <form> タグ の 属性 で 指定 し ます 。 
action 属性 は 、 フ ォ ー ム に 入力 され た デー タ を 処理 する CGI な どの プロ グラ ム の URL を 指定 
し ます 。HTML4.01 で は 省略 不可 の 属性 と な っ て いま す 。 
method 属性 で は 入力 され た デー タ を どの よう な 形 で 送信 する か を 設定 し ます 。get と post の 
どちら か を 選択 し ます が 、 一 般 的 に は 「post」 を 使用 し ます 。 両 者 の 違い は 次 の と お り で す 。 
get URL と フォ ー ム の デー タ を セッ ト で 送信 (デフ ォ ル ト ) 
post 。 フォ ー ム の デー タ の み を 送信 
この 属性 は 省略 可能 で す が 、 省 略し た 場合 は デフ ォ ル ト の get が 選択 され ます 。 
enctype 属性 は 、method="post" の 場合 ひ フ ォ ー ム の 送信 方 法 (MIME タイ プ ) を 指定 する 
も の で す 。 デ フォ ルト は 「application/x-www-form-urlencoded] で す 。 input type="file" 
の フォ ー ム の 場合 に は 「multipartform-data」 を 指定 し ます 。enctype 属性 に つい て は 次 項 を 
参照 し て くだ さい 。 
テキ スト な どの 入力 フィ ー ル ド や 送信 ボタ ン な ど 、 フ ォ ー ム の 各部 品 を 作成 する さま ざま な タタ 
グ は 、 す べ て この <form> ~ </form> タグ の 間 に 記 述 し て いき ます (次 項 以降 参照 )。 
な お 、 フ ォ ー ム に 入力 され た デー タ を 実際 に 送信 する た め に は 、 送信 され た デー タ を 処理 する 
た め の CGI な どの プロ グラ ム が 別に 必要 に な り ま す の で 注意 し て くだ さい 。 


indMDCSAPS DS 9 


<D> 

当校 の 講座 の 体験 談 を お 寄せ くだ さい 。 

</D> 

<form action="cgi-bin/formsample.cg1" method="post"> 
<PD> 
<textarea name="opinion" rows="8" cols="50"></textarea> 
</D> 
<D> 
会 員 番号 : <1nput type="text" name="number" value="B-"><br> 
お 名 前 (HN 可 ) : <1nput type="text" name="Vourname"> 
</D> 


<PD> 
<input type="submit" value=" 送 信 "> 
<input type="reset" value=" リ セッ ト "> 
</p> 

</form> 











ぅ に 
(WO NO RGD 8WkA0⑥ 9-D へ 42 
OR・ の 当 引 の wm 吉 moo 困 ケ の 


当校 の 講座 の 体験 謎 を お 寄せ くだ さい 。 





テー させ コ 

















1 1 IE5.5 1 コカ NN4 NN4.7 [に - ル 4 
O O O O O O O 








トー さい 





HTML4.01 規格 外 


<form action="mailto: 娘 " method="post" enctype=""> や </form> 





< メー ル の 送信 完 (メー ル ア ド レス ) 
た wseeee デ ー タ を 送信 する 際 の MIME タイ プ 


メー ル を 使っ て フォ ー ム 内 容 を 送信 する よう 設定 し ます 。 

action 属性 に は 「mailto: メ ー ル アド レス 」 を 指定 し ます 。 こ の 場合 の method 属性 は post 
で す 。 

enctype 属性 に は デー タ を 送信 する 際 の MIME タイ プ を 指定 し ます が 、 デ フォ ルト の 
「application/x-www-form-urlencoded」 で は 内 容 が エン コー ド (変換 ) され て いて その まま 
で は 読む お こと が で きず 、 変 換 す る た め の ツ ー ル が 必要 に な り ま す 。 そ れ に 対し て 「textVplain]」 
(プレ ー ン テキ スト 形式 ) や 「multipartform-data] を 指定 する と 、 そ の まま 読め る 状態 で 送信 
し て も ら う こと が で きま す 。 


確実 に 送信 する な ら CGil を 利用 し トス ミミ ミエ オミ ミミ ミオ スミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ メメ ミミ ミミ ミミ ミミ メス ミミ メメ ミオ 】 


フォ ー ム を メー ル て で 送信 する 方 法 は 簡単 に 設置 で を る こと が 魅力 で す が 、 ユ ー ザ ー が 使用 し て いる メー 
ル ソ フ ト や ブラ ウザ の 種類 設定 な ど 、 環 境 に よっ て うま く 機 能 し な いこ と も あり ます (Netscape 6 で 
は 機能 し ませ ん )。 確 実に 送信 し て も らい た い の で あれ ば CGI を 利用 し た ほう が よい で し ょ う 。 

CGI を 利用 する に は CGI に 関す る 知識 の ほか 、 プ ロバ イダ 側 で CGI の 利用 を 許可 し て いる こと な ど が 
基本 的 な 条件 に な り ま す 。 そ の た め メ ー ル を 利用 する 方 法 より も 扱い が 難し く な り ま す が 、Web 上 に は 
無料 の CGI スク リプ ト や CGI サー ビス を 提供 する サイ ト も 数 多く あり 、 こ うい っ た サー ビス を 利用 すれ 
ば 初心 者 で も CGI が 利用 し や すく な り ま す 。CGI に 関し て は p.334 も 参照 し こく だ さい 。 


OKKKRIEIRKAKLLARARALAYAAKLAAYKRKRKAXXKKKKEXXXXAXKAKIKKKKEEKYKIKIKXRRRI 
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<D> 

当校 の 講座 の 体験 設 を お 寄せ くだ さい 。 

</D> 

<form action="mailto:xxxx(@ank.co.jp" method="post" 


enctype="text/plain"> 
<D> 
<textarea name="opinion" rows="8" cols="50"></textarea> 
</P> 
<D> 
会 員 番号 ・ <1nput type="text" name="number" value="B-"><br> 
お 名 前 (HN 可 ) : <input type="text" name="Vourname"> 
</P> 


<D> 
<input type="submit" value=" 送 信 "> 
<input type="reset" value=" リ セッ ト "> 
</P> 

</form> 








フォ ー ム を メー ル で 送信 し た い 


トー さい 


163 


ak 
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強 フォ ー ム を メー ル で 送信 し た い - Microsoft Imternet Explorer に 


アル 罰 入 ) 表示 お 気 に A り 9 ツー ル D へ ルプ ⑪ 
の 回 国人 の の 時 交 pm20 仙 77 の 
当校 の 講座 の 体験 談 を お 客 せ くだ さい 。 


| テキ スト を 入力 し て 送っ て み ま し ょ う 。 








会 員 番号 : 時 123-45e 
お 名 前 (HN 可 ) : 務 涼 太郎 








当校 の 講座 の 体験 談 を お 寄せ くだ さい 。 


3 よう 。 















会 員 番号 :B-123-456 
お 名 前 (HN 可 ) : 開 泳 太朗 






人 Netscape 6 で は メー ルウ ィ ン ド ウ が 開く だ け で 
フォ ー ム の 送信 は 行わ れ ま せん 








opinion= デ テキスト を 入力 し て 送っ て み ま し ょ う 。 
number=B-123-456 
yourmame= 翔 泳 太郎 


人 フォ ー ム の 受信 結果 (Outlook Express で 受信 ) 


^ enctype=application/x-www-form-urlencoded (デフ ォ ル ト ) を 指定 し た 場合 の 受信 結果 。 エ ンコ ー ド する 必要 が あり ます 


4 enctype=multiparform-data を 指定 し た 場合 の 受信 結果 





1 子 】 IE5 1 王 其 -】 | ヨ : NN4 NN4.7 に に ルコ 
O O O O O O し 3 
※ Macintosh 版 Internet Explorer 5 は 対応 し て いま せん 








問い 合わ せ 先 を 示し た い 
ヒー ゆ デ アリ ンク を 利用 し て メー ル を 送信 し た い ・… 











FE | 





テー ふい 







送信 ボタ ン を 作り た い 


<input tyDpe="submit" 廊 > 





文 seeeeeiidie=' ボ タン 名 「 
value=" ラ ベル 名 






type="Submit'" で フォ ー ム の 内 容 を 送信 する 送信 ボタ ン を 作成 し ます 。 フ ォ ー ム を 送信 し て も 
ら う に は 、 こ の ボタ ン か が 必要 で す 。 

value 属性 は ボタ ン に 表示 する テキ スト (ラベ ル ) を 設定 する も の で す 。「 送 信 」 「 送 る ] な ど 
の テキ スト は この 属性 で 設定 し ます 。 こ の 属性 を 指定 し な い 場 合 は ブラ ウザ 側 の デフ ォ ル ト の テ 
キス ト が 用 いら れ ま す 。 Intermet Explorer で は 「 ク エリ 送信 ]、Netscape 6 で は 「 ク エリ ー の 
実行 」、 そ れ 以 前 の Netscape Navigator で は 「Submit Query」 と 表示 され ます 。 

name 属性 は 複数 の 送信 ボタ ン を 作成 し た 場合 に 、 押 され た ボタ ン を 受信 側 で 判別 する た め の 
値 を 設定 し ます 。 






<form action="cqgi-bin/formsample.cgi" method="post"> 








<D> 
デフ ォ ル ト <br> 

<input tVDe="submit"> 

</D> 

<D> 

ラベ ル を 指定 し て み ま す 。<br> 

<input type="submit" value=" 送 信 "><br> 

<input type="submit" value=" 確 認 が 済ん た ら こ の ボタ ン を 押し て 送っ て くだ さい 。 "> 
</Pp> 
</form> 
















送信 ボタ ン を 作り た い 


衝 送信 タン を 作り た い - Microsoft Internet Explorer 


アア イル) 編集) 表示 ) お 気に入り ⑳ ツ - ル ①D ん ヘルプ ⑪ 


G*・ の 四 引 人 の の 則 吉 mo の zo の は > 四 ・ 
デフ ォ ル ト 


ラベ ル を 指定 し て み ま す 。 
[人 


1| 確認 が 済ん だ ら この ボタン を 押し て 送っ て くだ さい 。 ] 








や 送信 ポタ ン を 作り た い - Netscape 6 


shacomVbook/pc/t/taedic/h 08foe ] 


り エ リー の 実行 | 
ラベ ル を 指定 し て み ま す 。 
送信 


確認 が 済ん だ ら この ボロン を 押し て 送っ て くだ さい 。 | 





テー さい ュ ) 





1 1 IE5.5 1 ゴ :) ドド ドド 7 守 4 に に ルオ 
O O O O O O O 
※ Macintosh 版 Internet Explorer 5 の デフ ォ ル ト の テキ スト は 「Submitl で す 
リセ ッ ト ポ タン を 作り た い 
画像 を 送信 ボタ ン に し た い 











<input tyDe="reset" 廊 > 





娘 eeeeeevValue=" ラ ベル 名 " 





type="reset" で 、 フ ォ ー ム の 内 容 を 初期 状態 に 戻す リセ ッ ト ボ タン を 作成 し ます 。 ユー ザー が 
リセ ッ ト ボ タン を 押す と 、 そ の フォ ー ム に ユー ザー か 入力 し た 内 容 や チェ ッ ク し た 項目 が 取り 消 
され 、 初 期 状 態 に な り ま す 。 

value 属性 は ボタ ン に 表示 する テキ スト (ラベ ル ) を 設定 する も の で す 。「 や り 直 し 」「 取 り 消 
し 」 な どの テキ スト は この 属性 で 設定 し ます 。 こ の 属性 を 指定 し な い 場 合 は ブラ ウザ 側 の デフ ォ 
ルト の テキ スト が 用 いら れ ま す 。 Internet Explorer、Netscape 6 で は 「 リ セッ ト 」、 バ ー ジ ョ 
ン 6 以 前 の Netscape Navigator で は 「Reset」 と 表示 され ます 。 


UN を EOID 0 科 0 
<form action="cgi-bin/formsample.cgi" method="post"> 
<PD> 
デフ ォ ル ト <br> 
<input tyDe="reset"> 
</P> 
<PD> 
ラベ ル を 指定 し て み ま す 。<br> 
<input type="reset" value=" や り 直 し "><br> 
<input type="reset" value=" 最 初 か ら や り 直 す に は この ポタ ン を 押し て くだ さい 。 "> 
</D> 
</form> 


</body> 


テー ミト ! 








/ デ 当 リセ ッ ト 本 タン を 作り た い 


Microso 佳 mternet Explorer 


アイ ル (F) 編集) 表示 び ) お 気 に 入 D ツー ル ① へ ルプ ⑪ 


OR- の 回 回る の ws 支 pmoo の zo @ らき 回 ・ 自 
デフ ォ ル ト 
[リセ yt ] 


ラベ ル を 指定 し て み ま す 。 
[し 」 


【 最初 か ら や り 直 す に は この ポタ ン を 押し て くだ さい 。 ] 














IN NN リセ ッ ト 示 タン を 作り た (いい - Netscape 6 


ラベ ル を 指定 し て み ま す 。 
_ や り 直 し | 


最初 か ら や り 直 す に は この ポン を 押し て くだ さい 。 | 





ば ュ メ ルト: 完了 (0201 秒 








良 リセ ッ ト 本 タン の 効果 - Micro 
アイ ル ) 編集) 表示 W) お 気 に 和 0D@W ア 


@ 京 ・ の 6 回 回 @ 


会 員 の か た は こち ら か ら 登 録 し 
て くだ さい 。 


会 員 番号 : lg-987-es4 
お 名 前 : 務 涼 大 郎 
パス ワー ド : eeee 


会 員 の か た は こち ら か ら 登 録 し 
て くだ さい 。 

会 員 番号 : g- 

お 名 前 : 

パス ワー ド : 


CXXX) コ 


ID 





人 入力 後 リ セッ ト ボ タン を 押す と 人 入力 し た 内 容 が 消去 され 、 初 期 状態 に な か り ます 
1】 1 二 】 1 王 た 】 1 コ : NN4 ドド 和 4 に ル コ 
O O O O O O O 





※ Macintosh 版 Internet Explorer 5 の デフ ォ ル ト の テキ スト は 「HReset」 で す 








テー ミコ 





<input tyDpe= "1maqe" 文 > 








大 *eeeesrc=" 画 像 ファ イル 名 " (URL) 
alt=" 画 像 の 代わ り の テキ スト " 
name=" ボ タン 名 " 
align="top"、"middle"、"bottom"、"left"、"right" 


type="image" を 指定 する と 、 画 像 を 送信 ボタ ン と し て 利用 で きる よう に な り ま す 。 
SrC 属性 で 使用 する 画像 ファ イル 名 (URL) を 、alt 属 性 で 画像 の 代替 テキ スト を 設定 し ます が 、 
alt 属性 は 対応 し て いな い ブ ラウ ザ も あり ます 。 
align 属性 で は 次 の よう な 値 を と っ て 、 通 常 の 画像 同様 に 表示 方 法 や テキ スト の 回 り 込み を 指定 
する こと が で きま す 。 
top 画像 の 上 部 と 周囲 の テキ スト の 上 部 を 揃え る 
middle 画像 の 中 央 と 周囲 の テキ スト の ペー スラ イン を 揃え る 
bottom 画像 の 下部 と テキ スト の ベー スラ イン を 揃え る (デフ ォ ルト ) 
left 画像 が 左端 に 寄り 、 そ の 右側 に テキ スト を 回 り 込 ませ る 
right 画像 が 右端 に 寄り 、 そ の 左側 に テキ スト を 回 り 込ま せる 
な お 、 回 り 込 み を 解除 する 場合 は <br clear=""> (D.138 参照 ) を 使っ て くだ さい 。 


<form action="cgi-bin/formsample.cgi" method="post"> 


<PD> 


<input type="1mage" src="cat_submit.gif" at=" 送 信 " name="submit"> 
</D> 
</form> 





| 攻 画像 を 送信 示 タ ン に し た い - Microspft Internet Eplorer 
カイル) 編集) 表示 お 気に入り ツール ①D ヘル プ ⑬ 


@s・ の 回 @ の 次 pm20 仙 ダ の の 人 B・ 回 ・ 思 


の イタ ーネット 


当 古 休 を 送信 未 タ ン に し た い - Microspft Internet Explorer 
イル) 編集 D 表示 お 気に入り ⑳ ツー ル ① ヘル プ ⑪ 


@・ の 加 避 人 全 の wm 衣 pwcAp S な の の 全う 較 ・|J 


@ イン ター ネッ ト 





テー さ コ 


1 1 ゴ コ 1 二 え -] 1 ココ NN4 NN4.7 に に ルコ 
O O O O O O O 








テー ふさ トコ 
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<button type="" ※> て </button> 





娘 *eseessubmit、reset、button 
seeeesname=" ボ タン 名 " 
value=" 送 信 さ れる テキ スト " 





<input> タグ を 指定 し た と き と 同 様 の ボタ ン を 作成 し ます が 、 こ の タグ で は <button> タグ と 
</button> タグ の 間 の 内 容 を ボタ ン の 上 に 表示 する こと が で きま す 。 そ の た め テ キス ト の 表示 方 
法 を 変え た り 、 ボ タン 上 に 画像 を 表示 させ た り 、 あ る い は それ ら を 組合 わせ た りす る こと が 可能 
に な り ま す 。 

type 属性 で ボタ ン の タイ プ に 、submit (送信 )、reset (リセ ッ ト )、button (押し ボタ ン ) 
の いずれ か を 指定 し て くだ さい 。 デ フォ ルト は submit で す 。button を 指定 する と 汎用 的 に 利用 
で きる 押し ボタ ン が 作成 され ます 。JavaScript を 使う 場合 な ど 、 送 信 や リセ ッ ト 以 外 に ボタ ン が 
必要 な と き に 利用 で きま す 。 

name、value 属性 に は 複数 の ボタ ン を 配置 する 場合 に 、 受 信 側 で 押さ れ た ボタ ン を 判別 する た 
め の 値 を 設定 し ます 。 





<form action="cgi-bin/formsample.cgi" method="post"> 
<p> テキ スト を 使っ た ボタ ン で す </p> 


<D> 


<button type="submit" name="submit"' value="submit"> 
<font size="4"> そう し ん ! </font></button> 

<button type="reset" name="reset" value="reset"> 
<font size="4"> り せ っ と ! </font></button> 

</D> 





<hr width="500" align="left"> 
<P> 画像 を 使っ た ボタ ン で す </P> 





<D> 
<button type="button" name="imagebutton"> 
<img src="cat_40.gif" width="40" height="40" alt=" "><br> 更新 
</button> 
</P> 
</form> 





午 本 タン を 作り た (いい - Micrnsoft Internet Explorer 


アイ ル (F) 編集 ) 表示 ) お 気 に 入 D⑯ ツール ①D へ ルフ ⑪ 


@・ の 6 回 国人 の の ws 実 0 谷 7 G の ・ 計 回 
テキ スト を 使っ た ポタ ン で す 


| そう し ん! | り せ っ と ! | 








画像 を 使っ た ボタ ン で す 











訳 未 タ ン を 作り た (いい - Netscape 


4 
そう し ん ! DB っ と | 1 


画像 を 使っ た ボタ ン で す 














NN4 ドド 守 4 に に ルコ 
※ O 





由 。 光 還 ポタ ン を 作り た い -ーーーーー… 
リセ ッ ト ボ タン を 作り た い 






剛 人 の 隊 17 っ 





エー さい 











7 FORM “ 
1 行 の テキ スト 入力 フィ ー ル ド を 作り た い 


<input type=" 廊 " 広 > 





支 eeeeeetext、 DaSSWOrd 
式 eeeeeename=" フ ィ ー ル ド 名 " 
size=" フ ィ ー ル ド 幅 " (文字 数 ) 
Value=" デ フォ ルト で 表示 され る テキ スト " 
maxlength=" 入 力 可 能 な 最大 文字 数 " 





1 行 の テキ スト 入力 フィ ー ル ド を 作成 し ます 。 

name 属性 は 、 送 信 さ れ て きた デー タ を 解読 する と き な ど に 使用 する 名 前 を 指定 する も の で す 。 

SiZe 属性 は 、 表 示さ れる フィ ー ル ド の 幅 を 文字 数 で 指定 し ます 。 

Value 属性 で 指定 され る 値 は 、 入 力 フ ィ ー ル ド に あら か じ め 表 示さ れる テキ スト で す 。 

maxlength 属性 は 、 フ ィ ー ル ド に 入力 で きる 最大 の 文字 数 を 指定 し ます 。 

また 、type="text" の 代わ り に type="password" を 指定 する と 、 入 力 し た 文字 が 直接 に は 表 
示さ れ な く な り 、 一 般 的 に は 「*」 や 「 欠 で 置き 換え て 表示 され ます 。 た だ し 、 デ ー タ が 暗号 


化 さ れる わけ で は な く 、 送 信 さ れ た デー タ を 直接 見 れ ば 解読 する こと が で きる の で 、 利 用 に は 注 
意 が 必要 で す 。 


<P> 会 員 の か た は こち ら か ら 登 録 し て こく だ さい 。</p> 
<form action="cgi-bin/formsample.cqi" method="post"> 
<D> 


会 員 番号 : <1input type="text" name="number" value="B-"><br> 


お 名 前 : <1nput type="text" name="yourname"><br> 

パス ワー ド : <input type="password" name="pw' size="10"> 

</P> 

<1nput type="submit" value=" 登 録 "><input tVpe="reset"> 
</form> 








1 行 の デキ スト 入力 フィ ー ル ド を 作り た い 


午 1 行 の テキ スト 入力 フィ ー ル ド を 作り た い - Microsoft Internet Explorer 
イル) 編集) 表示) お 気 に 入 DO⑳ ツー ル ① ヘル プ ⑬ 


@⑨ 京 ・② 回 多 の ws 表 5mcAp gp の 人 
会 員 の か た は こち ら か ら 登 録 し て くだ さい 。 


会 員 番 号 : g- 


ヨ 」 行 の テキ スト 入力 フィ ー ル ド を 折り た い - Microsoft mter 司 || 
お 名 前 : 


アイ ル P 軒 筆 D 表示 ⑰ お 気に入り ⑯ ツー- ル ①D ん ルプ ⑪ 
5 か ー ド OR・ の 四 人 0 の 9 
会 員 の か た は こち ら か ら 登録 し て くだ さい 、。 
会 員 番 号 : rsoe-197 |] 
お 名 前 : | 請 大 


人 る デフ ォ ル ト 





人 る 入力 例 。type="password'" の フィ ー ル ド に は 「 欠 が 
表示 され ます 


FN 1 行 の テキ スト 入力 フィ ー ル ド を 作り た いい - Netscape 65 
。 アイ ル (F) 編集 E) 表示 ( び ) 検索 G⑤) ジャ ンプ) ブック マーク) が ①D ヘル プ ゆ 


AG@o 


会 員 番 号 :B- 

お 名 前 : 

2 ウー o / フト 愉 部 
登録 | り ey | 会 員 の か た は こち ら か ら 登録 し て くだ さい 。 


会 員 番号 :B-3006-1987 
お 名 前 : 開 泳 太郎 
ドキ ュ メ ント : 完 了 (02 秒 ) パス ワー ド : 陸 * 
全 デ フォ ルト 


テー さ コ 





人 る 入力 例 。type="password' の フィ ー ル ド に は 「*」 が 
表示 され ます 








人 フォ ー ム の 受信 例 。 type="password" の 入力 内 容 も その まま 受信 で きま す 


1 1 1 三 -】 1 ココ NN4 ドド し 完 4 に ルコ 
(@) O O O O O O 
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wrap 属性 の み HTML4.01 規格 外 


<textarea 文 > や </textarea> 





大 essesname=" フ ィ ー ル ド 名 " 
cols=" 幅 "(半角 文字 数 ) 
rows=" 行 数 " 
wrap="soft"、"hard"、"off" (改行 方 法 ) 





<textarea> タグ は 複数 行 の 入力 が 可能 な フィ ー ル ド を 作成 し ます 。 
COlS 属性 で 幅 (1 行 に 入力 可能 な 半角 文字 数 ) を 、rows 属性 で 行 数 を 指定 し て フィ ー ル ド の 
大 き さ を 決め る の で 、 こ の 2 つ は 必ず 指定 し な けれ ば な り ま せん 。 
name 属性 は 、 送信 さ れ て きた デー タ を 解読 する と き な ど に 使用 する 名 前 を 指定 する も の で す 。 
wrap 属性 は 、 テ キス ト が フィ ー ル ド 右 端 に まで 達し た と き の 改 行方 法 を 指定 し ます 。 
soft 画面 上 で は 自動 的 に 改行 し て 表示 され る が 、 実際 に 送信 され る デー タ は 改行 され な い 
hard 画面 上 で 自動 的 に 改行 し て 表示 し 、 送 信 さ れる デー タ に も 改行 が 入る 
off 改行 され な い 
Internet Explorer、Netscape 6 と も に 、 デ フォ ルト が soft と な っ て いる た め wrap 属性 が な 
く て も 表示 上 改行 され ます が 、4.7 以前 の Netscape Navigator で この 属性 が 指定 され て いな い 
場合 は 改行 され ず に 表示 され ます 。 こ の wrap 属性 は Internet Explorer と Netscape 
Navigator が 独自 に 拡張 し た も の で 、HTML4.01 で は 定義 され て いま せん 。 
<textarea> タグ と </textarea> タグ の 間 に テ キス ト を 記述 し て お け ば 、 入 力 フィ ー ル ド の 中 
に その テキ スト を あら か じ め 表 示さ せる こと が で きま す 。 


テー ミト 





<P> 当校 へ の ご 意見 は こち ら か ら ど う ぞ 。</p> 
<form action= "cgi-bin/formsample.cqg1" method="post"> 


<D> 

<textarea name="opinion1" rows="8" cols="50"></textarea><br> 

<textarea name="opinion2" rows="8" cols="50" wrap="hard"> 

いろ いろ な 意見 を お 待ち し て いま す 。</textarea> 

</D> 

<input tVDe="submit" value=" 送 信 "><1nput tVDe="reset"> 
</form> 
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psoft nternet Emplorer 


当校 へ の ご 意見 は こち ら か ら ど う ぞ . 


玉 可 行 の テキ スト 入力 フ ィ ー ル ド を 作り た い Micr 


アイ ル (上 直入 ⑰ 表示 お 思 に 入 0@⑩ ウー- ル MD 
⑨m・ の 人 の ws 支 pmo9 
当校 へ の ご 意見 は こち ら か ら どう ぞ - 









いろ いろ な 意見 を お 策 ち し て いま す 。 チキ スト まき 入 力 す る と を か た ち に な り ま す 。 


この よう 
入力 解 の ひと つと し て ご 賢く だ さい 。 


exterew う グ を 用 


| 


ん きけ る の で 便利 


IE 





ィ ー ル ド を 作り た い - Netscape 6 


当校 へ の ご 意見 は こち ら か ら ど う ぞ 。 








人 フォ ー ム の 受信 例 (Internet Explorer か ら の 送信 )。wrap 属性 の 値 に よっ て 改行 の 状態 が 異な り ます 


1 1 王寺) IE6 NN4 NN4.7 ド に ルオ 
O O O O O @) O 








FT 








隠し フィ ー ル ド を 作り た い 


<input type="hidden" 文 > 





太 eeeeeename=" フ ィ ー ル ド 名 " 
value=" 送 信 さ れる テキ スト " 






type="hidden" で 、 隠 し フィ ー ル ド を 作成 し ます 。 
これ で 作成 され た フィ ー ル ド は 画面 上 に 表示 され ませ ん が 、value 属性 で 設定 し た 値 が 送信 さ 
れる し くみ に な っ て いま す 。 ユ ー ザ ー に は 特に 見 せる 必要 の な い 値 を 送信 し た いと き な ど に 利用 


し ます 。 
name 属性 は 、 送 信 さ れ て きた デー タ を 解読 する と き な ど に 使用 する 名 前 を 指定 する も の で す 。 


<P> 会 員 の か た は こち ら か ら 登録 し て くだ さい 。</p> 
<form action="cgi-bin/formsample.cq1" method="post"> 


<D> 


<input type="hidden" name="present" value="frompaqe3"> 


会 員 番号 : <1nput type="text" name="number" value="B-"><br> 
お 名 前 : <1nput type="text" name="Vourname"> 

</P> 

<1nput type="submit" value=" 登 録 "><input tVpe="reset"> 


</form> 


テー ヽ ! 





178 隠し フィ ー ル ド を 作り た い 


育 防 し フィ ー ル ド を 作り た い - Microsoft Imternet Explorer 


プア イル) 編集) 表示) お 気に入り ⑱ ウー ル ①。 ヘルプ ⑪ 


@・⑨ 回 回 爺 の 球 束 swcAO の な の の 「 
会 員 の か た は こち ら か ら 登 録 し て くだ さい 。 


隔 下 し メー ルド を ft た い - Mieresoft nermet prer 大 | 隔 了 
会 員 番号 : B- アイ ル 尽 6) 表示 ⑰ お 気 に 入 0⑳ ツ - ル MD AM 鞭 
お 名 前 : GR の 人 の の 
会 員 の か た は こち ら か ら 登 録 し て くだ さい 、。 
[護り セ y ト ] 


会 員 番号 : Bi23-45e 
お 名 前 : 弄 大 


回 回 因 
トト 








会 員 の か た は こち ら か ら 登録 し て くだ さい 


会 員 番号 :B-123-456 
Hf 補 


テー さ コ 





人 フォ ー ム の 受信 例 。 type="hidden" で 指定 され た name 属性 と value 属性 の 値 も 送信 され ます 


1 1 1 二 基 -】 1 コ : ドド 3 ドド 4 N6.2 


O 
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<1nput type="radio" 廊 > 
<1nput type="radio" 文 checked> 





到 eeeeeeniaime='" ボ タン 名 " 
Value=" 送 信 さ れる テキ スト " 





丸い ボタ ン を 作成 し 、 選 択 肢 か ら ひ と つ を 選択 で きる よう に し ます 。 

Value 属性 は デー タ が 送信 され た と き に 、 選択 され た 項目 が 何で ある か を 判別 する た め の 値 で す 。 

name 属性 で ボタ ン に 名 前 を つけ ます が 、 こ の 値 が 同じ ボタ ン は 同一 の グル ー プ と し て 扱わ れ 
ます 。 共通 の 項目 に 対す る 選択 肢 の 場合 に は 、 同 じ 値 を 設定 し て くだ さい 。 同じ グル ー プ の ラジ 
オ ボ タ ン で は ひと つの 項目 し か 選択 で きま せん 。 

また 、checked 属性 を 指定 し て お く と 、 そ の ボタ ン が あら か じ め 選 択 され た 状態 で 表示 され る 
よう に な り ま す 。 


S0URCE 
<D> 
当校 を 選ん だ 一 番 の 理由 を お 聞か せく だ さい 。 
</P> 
<form action="cgi-bin/formsample.cqi" method="post"> 


<D テ > 


トー ミコ 


<input type="radio" name="reason" value="famous"> 有名 だ か ら <br> 
<input type="radio" name="reason" value="location"> 駅 か ら 近 いか ら <br> 
<input type="radio" name="reason" value="variety" checked> 講座 の 種類 
が 豊富 だ か ら <br> 

<input type="radio" name="reason" value="instructor"> 講師 陣 が 優れ て いる 
か ら <br> 

<input type="radio" name="reason" value="cost"> 受 講 料 が 適切 だ か ら <br> 
<input type="radio" name="reason" value="others"> その他 

</D> 

<input type="submit" value=" 送 信 "><input tVpe="reset"> 


</form> 











ラジ オ 示 タン を 作り た ( い 一 Microsoft Internet Explorer 


イル 尽 6) 表示 人 ⑦ お 気 に 入 O⑱ ツー ル ① ヘル プ ⑪ 


〇 有名 だ か ら 

o 駅 か ら 近い か ら 

@ 講 座 の 種類 が 豊富 だ か ら - 

o 講 師 陣 が 優れ て いる か ら 当校 を 選ん だ 一 番 の 理由 を お 聞か せく だ 
受講 料 が 適切 だ か ら さい ・ 


oO その他 有名 だ か ら 


(gzE] 3 信和 が 全 だ 
リセ ッ ト ? 講 座 の に か ら 
崇 講師 陣 が 優れ て いる か ら 
受講 料 が 適切 だ か ら 
の その他 





全 デ フォ ルト 。checked 属性 が 指定 され た 項目 が 選択 さ 
れ て いま す 











人 入力 例 。 項 目 は ひと つ し か が 選べ ませ ん 












NN ラジ オ 本 タ ン を 作り た い - Netscape 6 韻 回 四 
ょ アイ ル (F) 編集 (E) 表示 (Y 検索 ⑤) ジャ ンプ (G) ブッ クマ ー の ⑧) 2 が ①D へ ルプ ⑬ 










r 有名 だ か ら 
て 駅 か ら 近 いか ら 。 
e 講座 の 種類 が 豊富 だ か ら 
r 講師 陣 が 優れ て いる か ら 
て 受講 料 が 適切 だ か ら 
て その他 




















当校 を 選ん だ 一 番 の 理由 を お 聞か せく だ さい 。 
有名 だ か ら 


人 の 机 か ら 
座 の 種類 が 豊富 だ か ら 






テー さ ュ | 


人 る デフ ォ ル ト 。checked 属性 が 指定 され た 項目 が 選択 さ 
れ て いま す 


人 入力 例 。 項 目 は ひと つ し が 選べ ませ ん 





人 この よう な 内 容 が 送信 され ます 
1% IE5 圭介] 1 NN4 NN4.7 に ルコ 
O O O O O O O 











11 
チェ ッ ク ボ ックス を 作り た い 


<1nput type="checkbox" 文 > 
<input type="checkbox" 文 checked> 











文 seeeeeiniaie=' ボ タン 名 を 
Value=" 送 信 さ れる テキ スト " 


知 形 の ボタ ン を 作成 し 、 選択 肢 か ら 項 目 を 複数 選択 で きる よう に し ます 。 

Value 属性 は デー タ が 送信 され た と き に 、 選択 され た 項目 が 何で ある か を 判別 する た め の 値 で す 。 

name 属性 で は ボタ ン に 名 前 を つけ ます が 、 こ の 値 が 同じ ボタ ン は 同一 ひ の グ ルー プ と し て 扱わ 
れ ま す 。 共 通 の 項目 に 対す る 選択 肢 の 場合 に は 、 同 じ 値 を 設定 し て くだ さい 。 チェ ッ ク ボ ックス 
は 、 同 一 グル ー プ で も 複数 選択 が 可能 で す 。 

また 、checked 属性 を 指定 し て お く と 、 そ の ボタ ン が あら か じ め 選 択 され た 状態 で 表示 され る 
よう に な り ま す 。 


<D> 

当校 を 選ん だ 理由 を すべ て お 聞か せく だ さい 。 

</D> 

<form action= "cgi-bin/formsample.cgi" method="post"> 


<D> 


トー ミコ 


<input type="checkbox" name="reason" value="famous"> 有名 だ か ら <br> 
<input type="checkbox" name="reason" value="location "> 駅 か ら 近い か ら 
<br> 

<input type="checkbox" name="reason" value="variety "> 講座 の 種類 が 豊富 
だ か ら <br> 

<input type="checkbox" name="reason" value="instructor" checked> 講師 
陣 が 優れ て いる か ら <br> 

<input type="checkbox" name="reason" value="cost"> 受講 料 が 適切 だ か ら 
<br> 

<input type="checkbox" name="reason" value="others"> その他 

</P> 





182 "チェ ッ ク ボ ックス を 作り た い 


<input type="submit" Value=" 送 信 "><1nput tVpe="reset"> 
</form> 


当 チェ ッ カ ホッ クス を 作り た いい - Microsoft Internet Explorer 
アイ ル (F) 編集) 表示 ) お 気 に 入 D(⑯ ツー ル ① へ ヘルプ ⑬ 


@⑨ 京 ・9 国人 Q の 時 表 gmA0 還 の の ピラ 


当校 を 選ん だ 理由 を すべ て お 聞か せく だ さ 還 2220330 


アイ AO 圭 要 ⑰ 表示 お 気 に 入 0① Pen 本 5 
有名 だ か ら 信昌 條 8 
口 駅 か ら 近 いか ら 当校 を 選ん だ 理由 を すべ て お 剛 か せく だ 
講座 の 種類 が 豊富 だ か ら SM 
講師 陣 が 優れ て いる か ら ロ 下る だ か ら 
受講 料 が 適切 だ か ら ロ 潮 座 の 種類 が 代 富 だ か ら 
その 他 講師 陣 が 優れ て いる か ら 
受講 料 が 適切 だ か ら 
[送信] リセ y ト | ロ そ の 他 
|[ 間 [ty ト | 












































ム デ フォ ルト 。 checked 属 性 が 指定 され た 項目 が 選択 され て 
いま す ム 入 力 人 。 複数 選択 する こと が で きま す 





当校 を 選ん だ 理由 を すべ て お 聞か せく だ さい 。 


「 有名 だ か ら 

っ 当校 を 選ん だ 理由 を すべ て お 聞か せく だ さい 、 
講師 陣 が 優れ て いる か ら 疹 S5 。 

0 講座 の 欄 類 が 豊富 だ か ら 


送信 | リ Ey | 


テー ミュ 





ム デ フォ ルト 。checked 属 性 が 指定 され た 項目 が 選択 され て 
いま す ム 入力 例 。 複数 選択 する こと が で さき ます 








| 人 フォ ー ム の 受信 例 


1 1 1 王 基 -】 1 ココ NN4 に C 4 ド に ルス 
O O O O O O O 








<select 娘 ><option ※> て </option></select> 





文 eeeeeename= "メニュー 名 " 
六 seeeeevalue=" 送 信 さ れる テキ スト " 
selected 





ブル ダウ ン 形 式 の メニ ュー を 作成 し ます 。 

<Select> タグ の name 属性 は 、 デ ー タ 解読 の 手がかり な ど に 利用 され る 名 前 を メニ ュー 自体 
に つけ ます 。 

選択 肢 は <option> タグ を 使っ て 設定 し 、<option> タグ と </option> タグ で 挟ま れ た テキ ス 
ト が それ ぞ れ メニ ュー に 表示 され る 項目 と な り ま す 。 

Value 属性 は デー タ が 送信 され た と き に 、 選 択 さ れ た 項目 が 何で ある か を 判別 する た め の 値 を 
指定 し ます 。 こ の 値 を 指定 し な い 場 合 は 、<option> タグ と </option> タグ で 挟ま れ た テキ スト 、 
つま り メ ニュ ー 内 に 表示 され た テキ スト が 選択 され た 項目 と し て 送信 され ます 。 

また 、selected 属性 を 指定 し て お く と 、 そ の 項目 が あら か じ め 選 択 され た 状態 で 表示 され る よ 
うに な り ま す 。 


テー ミト) 





<D> 

当校 を 選ん だ 一 番 の 理由 を お 聞か せく だ さい 。 

</D> 

<form action="cgi-bin/formsample.cgi" method="post"> 


SD テ > 
<font size="2"> デ フォ ルト </font><br> 
<select name="reason"> 
<option value="famous"> 有名 だ か ら </option> 
<option value="location"> 駅 か ら 近 いか ら </option> 
<option value="variety"> 講座 の 種類 が 豊富 だ か ら </option> 
<option value="instructor"> 講師 陣 が 優れ て いる か ら </option> 
<option value="cost"> 受講 料 が 適切 だ か ら </option> 
<option value="others"> その 他 </option> 
</select> 
</D> 
<PD> 
<font size="2"> 最初 に 選択 され て いる 項目 を 変更 し ます </font><br> 
<select name="reason2"> 
<option value="famous "> 有名 だ か ら </option> 
<option value="location"> 駅 か ら 近 いか ら </option> 
<option value="variety"> 講座 の 種類 が 富 だ か ら </option> 
<option value="instructor"> 講師 陣 が 優れ て いる か ら </option> 





<option value="cost"> 受講 料 が 適切 だ か ら </option> し 4 
<option value="others" selected> その 他 </option> 4 
</select> 
</P> 


<input tyDpe="submit" value=" 送 信 "><1nput type="reset"> 
</form> 











当 ブル タウ ン 形式 の メニ ュー を 作り た (一 周 icrosoft Imternet Explorer 


アイ ル ⑥ E) 表示 お 気に入り ツー- ル ①D へ ルプ 0⑪ 


表示 の ビー 人 科 
当校 を 選ん だ 一 番 の 理由 を お 聞か せく だ さ @・⑨ i 回 人 の の Ws Ph 
デフ ォ ル ト 


当校 を 選ん だ 一 番 の 理由 を お 聞か せ 
者 ー くだ さい . 

最初 に 選択 され て いる 項目 を 変更 ます 本 

の 他 当 放 計 の 竹 類 が 全 宮 だ か ら ン 


[ 療 人 |[ り yt ] 最初 に 選択 され て いる 項目 を 変更 し ます 
通 切 だ か ら 


マ 


人 デフォルト 


N ブル タウ ン 形 式 の メニ ュー を 作り た い - Netscape 6 


デフ ォ ル ト 
有名 だ か ら 』 


当校 を 選ん だ 一 番 の 理由 を お 聞か せく だ 
に 選択 され て いる 項目 を 変更 し ます に oo 
その 他 | 


デフ ォ ル ト 
送信 | 中 | | 請 座 の 種類 が 豊富 だ か ら | 


人 デフォ ルト 


テー ミト! 





人 フォ ー ム の 受信 例 





思 ! IE5 IE5.5 IEe NN4 NN4.7 。 NG6.2 
O O O O O O O 

了 匠 人 、 リス ト ポ ッ クス を 作り た い …ーーーーーーーーー p.187 

4M ア メ ニュ ー の 選択 肢 を グル ー プ 化し た い ー…………… p190 





13 | FORM 回 
リス ト ボ ックス を 作り た い 


<select size="" 近 ><option 金 > て </option></select> 





支 *eece リ スト ボッ クス の 表示 行 数 

議 seeeeename=" メ ニュ ユー 名" 
multiple 

多く eeevalue= "送信 され る テキ スト " 
selected 


リス ト ボ ックス 形式 の メニ ュー を 作成 する に は 、<select> タグ に 表示 行 数 を 指定 する size 属 
性 を 設定 し ます 。name 属性 は 、 デ ー タ 解読 の 手がかり な ど に 利用 され る 名 前 を メニ ュー 自体 に 
つけ ます 。 

multiple 属性 を 指定 し て お く と 、 複 数 の 項目 を 選択 で きる よう に な り ま す 。 こ の 属性 が 指定 さ 
れ て いな い 場 合 は 、 ひ と つの 項目 し か 選択 で きま せん 。 

選択 肢 は <option> タグ を 使っ て 設定 し 、<option> タグ と </option> タグ で 挟ま れ た テキ ス 
ト が それ ぞ れ メニ ュー に 表示 され る 項目 と な り ま す 。 

Value 属性 は デー タ が 送信 され た と き に 、 選 択 さ れ た 項目 が 何で ある か を 判別 する た め の 値 を 
指定 し ます 。 こ の 値 を 指定 し な い 場合 は 、<option> タグ と </option> タグ で 挟ま れ た テキ スト 、 
つま り メ ニュ ー 内 に 表示 され た テキ スト が 選択 され た 項目 と し て 送信 され ます 。 

また 、selected 属性 を 指定 し て お く と 、 そ の 項目 が あら か じ め 選 択 さ れ た 状態 で 表示 され る よ 
うに な り ま す 。 





<D> 

当校 を 選ん だ 理由 を お 聞か せく だ さい 、。 

</P> 

<form action="cgi-bin/formsample.cqgi" method="post"> 


<D> 

<font size="2">3 行 だ け 表 示 </font><br> 

<select size="3" name="reason"> 
<option value= "famous"> 有名 だ か ら </option> 
<option value="location"> 駅 か ら 近 いか ら </option> 





リス ト ボ ックス を 作り た い 





テー ミュ 


187 





テー ミコ 





<option value="variety "> 講座 の 種類 が 豊富 だ か ら </option> 
<option value="instructor"> 講師 陣 が 優れ て いる か ら </option> 
<option value="cost"> 受講 料 が 適切 だ か ら </option> 
<option value="others"> その 他 </option> 
</select> 
</D> 
<P> 
<font size="2"> すべ て 表示 し て 複数 選択 も 可能 で す </font><br> 
<select size="6" name="reason2" multiple> 
<option value="famous"> 有名 だ か ら </option> 
<option value="location"> 駅 か ら 近 いか ら </option> 
<option value="variety"> 講座 の 種類 が 豊富 だ か ら </option> 
<option value="instructor"> 講師 陣 が 優れ て いる か ら </option> 
<option value="cost"> 受講 料 が 適切 だ か ら </option> 
<option value="others"> その 他 </option> 
</select> 
</D> 
<D> 
<font size="2"> 最初 に 選択 され て いる 項目 を 変更 し ます </font><br> 
<select size="6" name="reason3" multiple> 
<option value="famous"> 有名 だ か ら </option> 
<option value="location"> 駅 か ら 近 いか ら </option> 
<option value="variety"> 講座 の 種類 が 豊富 だ か ら </option> 
<option value="instructor"> 講師 陣 が 優れ て いる か ら </option> 
<option value="cost"> 受講 料 が 適切 だ か ら </option> 
<option value="others" selected> その 他 </option> 
</select> 
</D> 
<input type="submit" value=" 送 信 "><input tVpe="reset"> 


</form> 





リス ト ボ ックス を 作り た い 








当校 を 選ん だ 理由 を お 聞か せく だ さい . 
3 行 だ け 表 示 


語り 公佳 だ か ら 
すべ て 表示 し て 複数 選択 も 可能 で す 


最初 に 選択 され て いる 項目 を 変更 し ます 





全 デ フォル ト 


当校 を 選ん だ 理由 を お 聞か せく だ さい . 


ーー 引 


| 


人 る デ フォ ルト 











人 る フォ ー ム の 受信 例 
1 子 * | 王 】 1 三代 -】 |: NN4 ドド じ 守 4 に に ルコ 
O O O O O O O 
ブル ダウ ン 形 式 の メニ ュー を 作り た い ……………… p.184 





14 Ez g 還 
メニ ュー の 選択 肢 を グル ー プ 化し た い 


<optqgroup label=" 友 "><option labe=" 近 "> て 
</option></optqgrouD> 





た ws グループ 名 
wm……・ 簡 路 化 し た 選択 肢 





メニ ュー の 選択 肢 を グル ー プ 化し ます 。 対応 し た ブラ ウザ で は メニ ュー が 階層 化 さ れ て 表示 さ 
れ ま す 。 リ スト の 選択 肢 が 長い と き な ど に 便利 で す が 、<optgroup> の 中 に さら に <optgrouPp> 
を 使う こと は で きま せん 。 

label 属性 は メニ ュー に 表示 され る テキ スト を 設定 する 働き を を も ち 、<optgroup> タグ の label 
属性 で グル ー プ 名 を 、<option> タグ の label 属性 で 簡略 化し た 選択 肢 名 を 設定 し ます 。 
<option> タグ の label 属性 を 省略 し た 場合 や 、 こ の 属性 に 対応 し て いな い ブ ラウ ザ で は 、 
<option> タグ と </option> タグ の 間 の 内 容 が その まま 選択 肢 と し て 表示 され ます 。 


<D> 

最も 利用 頻度 の 高い ブラ ウザ を 教え て くだ さい 。 

</P> 

<form action="cgi-bin/formsample.cgi" method="post"> 


<D> 


トー さい 


<select name="browser"> 
<optgroup label="Internet Explorer"> 


<option label="IE 5.x" value="ie5">Internet Explorer 5.x</option> 
<option labe="IE 4.x" value="ie4">Intemet Explorer 4.x</option> 
<option labe="IE 3.x" value="ie3">Intemet Explorer 3.x</option> 


</optqrouD> 

<optqroup label="Netscape Navigator"> 
<option label="N 6.x" value="n6">Netscape 6.x</option> 
<option labe="NN 4.x" value="nn4">Netscape Navigator 4.x</option> 
<option label="NN 3.x" value="nn3 ">Netscape Navigator 3.x</option> 





</optqroup> 


190 メニ ュー の 選択 肢 を グル ー プ 化し た い 


<optgroup label=" そ の 他 "> 
<option label=" その他" value="other"> その 他 </option> 
</optgroup> 
</select> 
</P> 
<input type="submit" value=" 送 信 "><input type="reset"> 
</form> 


アイル 電 生 6) 表示 ⑰ お 包 に AO 2- ル AD パ ァ 攻 
| 


@ 京 ・ の 6 国人 の の ws アク 


本 月 拓 の 二 222 あ 数 6 
だ さい 、。 


jnernet bprer 5* 
e 


jnternet Erpbrer 5x 

jpternet Emlorer 4x Intemet Explorer 5x 

Internet Explorer 4x 
Internet Explorer 3 x 

Metsceee 6x り 

Netecaps Nevwator 4x Ae』 し バ 

Nascape Nevwotor 3 





Netscape Navigator4x 
Netscape Navigatordx 











信 ^ <optgroup Iabel> の み 対 応 し て いま す 人 <optgroup labDel> の み 対 応 し て いま す 





テー\ ュ 





4 Macintosh 版 Internet Explorer 5 で は 階層 化 も 行わ れ ま す 





1 1 三 ]】 昌三 大]】 IE6 ドド に 】 NN4 ドド し 守 4 に に ルイ 
optgroup label も 3 し 3 X O X に 3 メ 〇 O 
option label ※ ※ X ※ ※ に 3 X に 3 





※ Macintosh 版 Intemet Explorer 5 は <optgroup label>、<option label> と も に 対応 し て いま す 


E> ブル ダウ ン 形 式 の メニ ュー を 作り た い …ー………… p184 








ET に え ルル 3 リコ ヨン: コツ. コリ 


<fieldset> ぐ </fieldset> 
<legend aign=" 太 "> や </legend> 





文 *eeeeetop、bottom、left、right 





フォ ー ム に 含ま れる ユー ザー 如 入 力 可能 な 項目 を グル ー プ 化し ます 。 
<legend> タプ は 、 グル ー プ 化し た 入力 項目 に 対し て タイ トル を つけ る 機能 を 持ち 、 <fieldset> 
と </fieldset> タグ の 間 の 一 番 最初 に お きま す 。align 属性 で 、 タ イト ル の 表示 位置 を 指定 する こ 
と も で きま す が 、 align 属性 は 推奨 し な い 属 性 に 指定 され て いる の で 使用 に は 注意 し て くだ さい 。 
top タイ トル を 上 に 表示 (デフ ォ ル ト ) 
bottom タイ トル を 下 に 表示 
left タイ トル を 左 に 表示 
right タイ トル を 右 に 表示 





<form action="cqgi-bin/formsample.cqg1" method="post"> 
<fieldset> 
<legend> アン ケー ト </legend> 


<D> 


現在 稽古 事 を し て いま すか ? : 


テー ミュ 


<textarea rows="5" cols="70" name="freemessage"' wrap="hard"> 
</textarea> 
</D> 
</fieldset> 
<br> 
<fieldset> 
<legend> 個人 情報 </legend> 


<D> 


お 名 前 : <1nput type="text" name="Vourname"> 
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E-mall : <input type="text" size="40" name="email"> 
</P> 

</fieldset> 

<D> 

あり が と う ご ざ いま し た 。 

</D> 

<input tpe="submit" value=" 送 信 "><input type="reset"> 





現在 稽古 事 を し て いま すか 7? : @ し て いな い 1 つ し て いる o そ れ 以 上 し て いる 
重 古 事 を 始め る 場合 . ど の よう な 近習 形態 を 希望 し ます か ? : ロ 通 学 講座 通信 講座 ロ そ の 他 
当 サ イト ・ 当 校 に つい て の ご 便 見 ご 感想 を お 願い し ます (自由 回 答 ) 


個人 情報 
お 名 前 : 

住所 : 

守 話 番号 : 
あり が と う ご ざ いま し た 。 
EE23| 














アン ケー ト 

現在 衝 古 事 を し て いま すか ?: s し て いな い 1 つ し て いる て それ 以上 し て いる 

積 古事 を 始め る 場合 どの よう な 学習 形態 を 希望 し ます か ?:「 通学 講座 通信 講座 「 その 他 
当 サイ ト ・ 当 校 に つい て の ご 意見 ご 感想 を お 願い し ます (自由 回 答 ) 





トー ミコ 











あり が と うこ ざい まし た 。 
送信 | 9est | 





^ <fieldset> タグ で 挟ま れ た 項目 が グル ー プ 化 され 、 枠 線 で 囲ま れ ます 。 








1】 IE5 中 二 二 】 IE6 NN4 NN4.7 に ル コ 
O O O O ※ メ O 
※ Intemet Explorer 5.5 以 前 で は <legend> タプ に よる タイ トル の 文字 色 は 特に 変わ り ま せん 





馬 間 II 1 ウッ 





トー ミコ 


194 







| 6 FORM ( 
部 品 に ラベ ル を つけ た い 


<label> ぐ </label> 
<label for=" 文 "> や </label> 









才 cocooe 委 昭 す る id 属性 の 値 


ユー ザー に よる 入力 や 選択 が 可能 な 項目 (部 品 ) に 対し て 、 ラ ベル な どの 情報 を 付加 し ます 。 
これ に よっ て 、 フ ォ ー ム に 含ま れる テキ スト 部 分 と 入力 ・ 選 択 項目 な ど を 関連 付け る こと が で き 
ます 。 

設定 の 仕方 に は <label> タグ の み を 利用 する 方 法 と 、for 属 性 を 利用 する 方 法 と が あり ます 。 

<label> タグ で 設定 する 場合 に は 、 ラ ベル と な る テキ スト と 関連 付け た い 部 品 ( 例 : <input 
text=" 巡 "> な ど ) を <label> タグ と </label> タグ の 間 に 記 述 し ます 。 

for 属 性 を 利用 する 場合 に は 、<label for=""> タグ と </label> タグ の 間 に は ラベ ル と な る テ 
キス ト の み を 記述 し ます 。 そ し て 、 関 連 付け た い 部 品 に は id (p.6 参照 ) を 設定 し 、 そ の id と 同 
じ 値 を <label> タグ の for 属性 に 指定 し て 参照 させ ます 。 

この よう な 設定 を 行う こと で 、 自 動 的 に ラベ ル の つく 部 品 や value 属性 の 値 が 表示 され る 部 品 
以外 に も ラベ ル を つけ られ る よう に な り 、 た と えば テキ スト 部 分 を クリ ッ ク し て も 関連 付け られ 
た 宮部 品 に フォ ー カ ス が 移動 する な どの 効果 を 得る こと が で きま す 。 

な お 現時 点 で は Internet Explorer は <label for=""> の 形式 に の み 対 応 、Netscape も 完全 
に は 対応 し て いな いよ う で す 。 


人 OO 


<D> 

メー ル マ ガ ジン の 購読 : 

</P> 

<form action="cqgi-bin/formsample.cg1" method="post"> 
<D> 
<input type="radio" name="member" value="yes" id="kaiin"> 
<label for="kaiin"> 希望 する </label><br> 
<input type="radio" name="member" value="no" id="ippan"> 
<label for= "ippan"> 希望 し な い </label> 








部 品 に ラベ ル を つけ た い 





ッ P> 


<P テ > 


<label-E-mail : <1nput type="text" name="name" size="30"></label=<br> 
</D> 
<input tyDe= "submit" value=" 登 録 "><1input type="reset"> 

</form> 


当 部 品 に ラベ ル を つけ た い 


Microsoft Internet Explorer 


アイ ル (E) 編集 表示 ) お 気に入り ツー ル ① へ ルプ ⑬ 


@・ の 9 較 爺 の AR 表 pmwcA9 ケ の の ほっ 


メー ル マ ガ ジン の 購読 : 


も 
O 希 望 し な 


E-mail: 


EE:JIDL22 肖 








ボ 部 品 に ラベ ル を つけ た い - Netscape 6 


。 フ イル (F) 編集 EC) 表示 (V) 検索 G⑤) ジャ ンプ) ブッ クマ ー が B) が D へ ルプ ⑬ 
9@@@ 6 
W 





メー ル マ ガ ジン の 購読 : 


< 希 導 する 
c 希望 し な じ 


E-maiil: 
登録 | ッ | 





人 へ 「 希 望 する 」「 希 望 し な い ]」 が ラジ オ ボ タ ン の ラベ ル と な り 、 そ の 部 分 を クリ ッ ク す る こと で 、 ラ ジオ ボタ ン の チ 
ェ エッ ク が で きる よう に な り ま す 





1 子 】 1 IE5.5 1 コー NN4 ドド し 守 4 
O O O 3 X メ 


N6.2 
人 





テー ミト! 








で コー 
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1 1 
テー ブル ( 表 ) を 作り た い 
<table 娘 > て </table> 表 


<tr> て </tr> 横 一 列 ( 行 ) 
<td> て </td> セル 





大 *eeeeeborder=" ビ ピクセル" ( 枠 線 を 表示 ) 






<table> と </table> は 、 こ れ に 挟ま れ た 範囲 が テー ブル ( 表 ) で ある こと を 示す 基本 の タグ 
で す 。 テ ー ブ ル を 構成 する 問 要素 の 最初 と 最後 に 置き ます 。 枠 線 を 表示 する 場合 は border 属 性 を 
指定 し ます (p.200 参照)。 

<tr> と </tr> は 行 を 定義 むせ る タグ で す 。 横 一 列 分 の デー タ の 最初 と 最後 に 記述 し ます 。 

セル に 入る デー タ は それ ぞ れ <td> タグ と </td> タグ の 間 に 記 述 し ます 。 


<table> 
<tr> <td> 月 曜 </td><td> 入門 クラ ス </td> <td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr><td> 金曜 </td><td> 応用 クラ ス </td> <td。 今期 休講 </td></tr> 
</table> 
<br> 
<table border="2"> 
<tr> <td> 月 曜 </td><td> 入門 クラ ス </td> <td> 受付 終了 </td></tr> 
<tr> <td> 水曜 </td> <td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr><td> 金曜 </td><td> 応用 クラ ス </td><td> 今期 休講 </td></tr> 
</table> 











テー ブル ( 表 ) を 作り た い 





テー ブル ( 表 》 を 作り た いい - Microsoft Internet Explorer 


アイ ル ⑦ 表示 Q⑰ お 和 に AD ツー ル D へ レプ ⑪ 
@ 京 ・ の 6 還る の ws 実 5pmo0 軸 ケ の の 人 あ 還 ・ コ 
月 曜 入門 クラ ス 受付 終了 


水曜 基礎 クラ ス 募集 中 
金曜 応用 クラ ス 今期 休講 


月 曜 入門 クラ ス 受付 終了 
水曜 基礎 クラ ス 募集 中 
金曜 応用 クラ ス 今期 休講 








NN テー ブル ( 表 ) を 作り た い - Netscape 6 


月 曜 入門 クラ ス 受付 終了 
水曜 基礎 クラ ス 募集 中 
金曜 応用 クラ ス 今期 休講 


還 P す 2 ラ ス 陸 終了 | 





の 符 ーーー…ー oooeooeooeeeoe eeeeeseeeeseseoeeeeeeeeoeeeee 


<table> タグ は 、 統 計 結果 な ど を 純粋 に 「 表 ] 形式 で 表示 させ る と いう より も 、 む し ろ ペ ー ジ の レイ ア 
ウト 目的 で 利用 され る こと の ほう が 多く な っ て いま す 。HTML は 表示 方 法 に つい て 、 本 来 (性 質 上 当然 と 
いう べき で す が ) 決定 的 な 手段 を 持っ て いま せん 。 そ れ に 対処 する た め テ ー ブ ル の も つ 配 列 機能 に 目 が 向 
けら れ た の で す 。 上 手 く 活 用 する と 、 驚 く ほ ど 凝 っ た レイ アウ ト の ペー ジ を 作成 する こと が で きま す 。 

テー ブル の 短所 は ソー ス が 複雑 に な りや すい こと で す 。 慣 れる まで 、 意図 し た とおり の テー ブル を くみ 
上 げ る に は 根気 を 要する か も し れ ま せん 。 実際 に テー ブル を 上 手 く 使っ た ペー ジ の ソー ス な 見 て 研究 し た 
り 、 ま た 最近 で は 優秀 な HTML エディ タ が いく つも 出 ま わっ て いる の で 、 そ うし た ソフ ト を 活用 し て み 
る の も ひと つの 手 で す 。 

また テー ブル は 、 開 始 タ グ <table> か ら 終了 タグ </table> まで を 読み 込ん で か ら 表 示 が 始ま る 性 質 が 
ある た め 、 表 示 が 遅く な り が ち だ と いう 短所 も あり ます 。 こ の 点 に も 注意 し て 利用 する 必要 が あり ます 。 

た だ し 、HTML4.01 で は レイ アウ ト 目 的 で テー ブル を 使用 する こと は 好ま し く な い 方 法 だ と し 、 レ イ 
アウ ト に は スタ イル シー ト を 使用 する よう 定義 し て いる 点 を お 忘れ な く 。 





】 IE5 IE5.5 3 NN4 7 N6.2 
O O O O 〇 O O O 
全線 の 幅 を 指定 し た い …ーーーーーーーーーーーー p2ao 








に らい 「 
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テー ブル の 見 出し を つけ た い 


<th> ぐ </th> 


<th> タグ と </th> タグ で 行 や 列 の 見 出し を 作成 し ます 。 見 出し と し て 定義 され た テキ スト は 、 
一 般 的 に は 太字 で セン タリ ング され て 表示 され ます 。 

align 属性 を 指定 すれ ば 、 見 出し の 表示 位置 も 変更 する こと が 可能 で す (p.216 参照 |。 た だ し 、 
align 属性 は 推奨 し な い 属 性 に 指定 され て いる の で 使用 に は 注意 し て くだ さい 。 


S0URCE 


<table border="1"> 
<tr> <th> 曜日 </th><th> クラ ス </th><thz> 状況 </th></tr> 
<tr><td> 月 曜 </td> <td> 入門 クラ ス </td> <td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td> <td> 募集 中 </td></tr> 
<tr> <td> 金曜 </td> <td> 応用 クラ ス </td> <td> 今期 休講 </td></tr> 

</table> 

<br> 

<table border="1"> 
<tr>=th>= 曜日 </th><td> 月 曜 </td> <td> 水曜 </td> <td> 金曜 </td></tr> 
<tr><th= クラ ス </th><td> 入門 クラ ス </td><td> 基礎 クラ ス </td><td> 応用 クラ 
ス </td></tr> 
<tr>=th> 状況 </th><td> 受付 終了 </td><td> 募集 中 </td> <td> 今期 休講 </td> 
</tr> 

</table> 





に いて [| 


198 テー ブル の 見 出し を つけ た い 


当 テー ブル の 上 晃 出 し を つけ た い - Microsoft Internet Explorer 


アア イル) 編集) 表示 お気 に 入 D⑯ ウー- ル D へ ルプ ⑪ 


の の 国 肖 人 の の 時 宮 5m9 計 ガ の の 


曜日 クラ ス 状況 
月 曜 入門 クラ ス 受付 終了 
水曜 基礎 クラ ス 募集 中 
金曜 応用 クラ ス 今期 休講 


曜日 月曜 水曜 金曜 
クラ ス 入門 クラ ス 基礎 クラ ス 応用 クラ ス 
状況 受付 終了 募集 中 今期 休講 





ば テー ブル の 見 出し を つけ た い - Netscape 
。 ファ イル () 編集 (E) 表示 ( び 検索 ⑤) ジャ ンプ (⑯ ブッ クマ ー ク (⑧) 22①D ヘル ブ ⑪ 


必 日 クラ ス | 状況 
崩 曜 | 入 門 ク ラス 展 付 終了 
了 氷 曜 隊 礎 2 ラス 隊 集 中 
民 曜 | 店 用 クラ ス 了 |。 期 休講 











セル の 大 き さ SCECCCCCCCCCCCCCCCCTKTYTCTKTTKTYYYYYYYYTYYYYYTYTYYYTYYTYTYYYYYYYY 


デフ ォ ル ト の 状態 で は 、 セ ル の 大 き さ は 中 の テキ スト に 合わ せ て 自動 的 に 変化 し ます (p.212 参照 )。 


OK スス メメ オミ ミミ ミミ ミミ ミド ミオ オト ドル トト KKIKLKKIKXKLKKKIKIKKKKKKKKKLXKYKXKKXKXKLLKYRRRKERRRRRRRSE 


1 マイ ! 1 IE5.5 1 NN4 ドド P 容 4 に ルコ 
O O O O O O O 





テー ブル の 見 HH し を つけ た い 199 


に さい 






3 が TABIE ' 
枠 線 の 幅 を 指定 し た い 


<table border=" 文 "> て </table> 





支 *eeees 枠 線 の 幅 (ビク セル ) 






border 属 性 で 枠 線 の 幅 を 指定 し ます 。1 以上 の 数 値 を ビク セル で 指定 し て くだ さい 。 
この 属性 を 指定 し な けれ ば 枠 線 は 表示 され ませ ん 。 ま た 、border="0" を 設定 し た と きも 枠 線 は 
表示 され ませ ん 。 


<table border="5"> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 ク ラス </td><td> 募集 中 </td></tr> 
<tr> <td> 金曜 </td><td> 応用 クラ ス </td><td> 今期 休講 </td></tr> 
</table> 
<br> 
<table border="10"> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr> <td> 金曜 </td><td> 応用 クラ ス </td><td> 今期 休講 </td></tr> 
</table> 











で コー 


200 桁 線 の 幅 を 指定 し た い 

























当 視線 の 帳 を 指定 し た い - Microsoft Internet Explorer 尼 | 隔 孤 


カイル) 編集) 表示 W) お 気 に 入 D⑯ ツー ル ①D へ ML プ ⑪ 


OO 帳 全 の 吉 moo の zo の > 申 ・ ロ 


月 曜 入門 クラ ス 受付 終了 
水曜 基礎 クラ ス 募集 中 
金曜 応用 クラ ス 今期 休講 








月 曜 入門 クラ ス 受付 終了 
水曜 基礎 クラ ス 募集 中 
金曜 応用 クラ ス 今期 休 議 








岬 ラス 了 ア 











参照 


E! IE5 IE5.5 IE6 NN4 NN4.7 。 NG6.2 
O O Oo Oo O O Oo 
セル の 間隔 や マー ジン を 指定 し た い ………ー… p219 外 枠 の 表示 方 法 を 指定 し た い ………ー…ーーー… p2g4 


要 線 の 色 を 指定 し た い ーーー ドー ドー ドー ドー po22 内 側 肝 線 の 表示 方 法 を 指定 し た い ………ーーーー… p2ge 
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に いい 





テキ スト に 対す る テー ブル の 位置 を 指定 し た い 


<table aiiqn=" 文 "> て </table> 









文 essessleft、right、center 






align 属性 で テー ブル を 左 、 右 、 中 央 の いずれ か に 配置 し ます 。 

left、 ま た は right を 指定 し た と き は 、 テ ー ブ ル に 続く テキ スト が テー ブル の 横 に 回 り 込 み ま す 。 
回 り 込 み を 解除 する に は 、<br> タグ の clear 属性 を 使用 し ます (次 項 参照 )。 

デフ ォ ル ト は align="left'" で す が 、 こ の 属性 が 指定 され て いな いと テキ スト は 回 り 込 み ま せ ん 。 





<table border="1" align="left" width="40%"> 

<tr> <th> 曜日 </th><th> クラ ス </th><thz> 状況 </th></tr> 

<tr> <td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 

<tr> <td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 

<tr> <td> 金曜 </td><td> 応用 クラ ス </td><td> 今期 休講 </td></tr> 
</table> 
<D> 
align 属性 で テー ブル の 配置 を 左 、 右 、 中 央 の いずれ か に 配置 し ます 。left、 ま た は right を 指 
定 し た と き は 、 テ ー ブ ル に 続く テキ スト が テー ブル の 横 に 回 り 込 み ま す 。 回 り 込み を 解除 す 
る に は 、&ltzbr&gt: タ グ の clear 属性 を 使用 し ます 。 
デフ ォ ル ト は align="left' で す が 、 こ の 属性 が 指定 され て いな いと テキ スト は 回 り 込 み ま せん 。 
<br> 
た だ し 、align 属性 は 推奨 し な い 属 性 に 指定 され て お り 、 代 わり に スタ イル シー ト を 利用 す 
る よう 推奨 され て いま す 。 使 用 に は 注意 し て くだ さい 。 
<br clear="all"> 
</p> 





で 一 中 


<hr> 
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<table border="1" align="rnight" width="40%"> 

<tr> <th> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 

<tr><td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 

<tr><td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 

<tr><td> 金曜 </td> <td> 応用 クラ ス </td><td> 今期 休講 </td></tr> 
</table> 
<D> 
align 属性 で テー ブル の 配置 を 左 、 右 、 中 央 の いずれ か に 配置 し ます 。left、 ま た は right を 指 
定 し た と き は 、 テ ー ブ ル に 続く テキ スト が テー ブル の 横 に 回 り 込 み ま す 。 回 り 込 み を 解除 す 
る に は 、&ltbr&qt: タ グ の clear 属性 を 使用 し ます 。 
デフ ォ ル ト は align="left" で す が 、 こ の 属性 が 指定 され て いな いと テキ スト は 回 り 込 み ま せ ん 。 
<br> 
た だ し 、align 属性 は 推奨 し な い 属 性 に 指定 され て お り 、 代 わり に スタ イル シー ト を 利用 す 
る よう 推 毅 さ れ て いま す 。 使用 に は 注意 し て くだ さい 。 
</D> 


<hr> 


=table border="1" aliqn="center" width="40%"> 
<tr><th> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr> <td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td> <td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr> <td> 金曜 </td><td> 入門 クラ ス </td> <td> 今期 休講 </td></tr> 
</table> 
<D> 


align 属性 で テー ブル の 配置 を 左 、 右 、 中 央 の いずれ か に 配置 し ます 。left、 ま た は right を 指 








定 し た と き は 、 テ ー ブ ル に 続く テキ スト が テー ブル の 横 に 回 り 込 み ま す 。 回 り 込み を 解除 す テ 
る に は 、&ltbr&gt: タ グ の clear 属性 を 使用 し ます 。 」 
デフ ォ ル ト は align="left' で す が 、 こ の 属性 が 指定 され て いな いと テキ スト は 回 り 込 み ま せ ん 。 ル 
<br> 


た だ し 、align 属性 は 推奨 し な い 属 性 に 指定 され て お り 、 代 わり に スタ イル シー ト を 利用 す 
る よう 推奨 され て いま す 。 使用 に は 注意 し て くだ さい 。 
</P> 
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イル) 胃 業 ) 表示 6000 ッ ー ル D へ ル 20⑪ 
GO の 回 回 人 の の we 素 pm20 7 の の は ぁ 回 ・| 
フラ ス 状況 align 属性 で テー ブル の 配置 を 左右 中 央 の いす れ か に 配置 し ま ^ 

月 二 大門 2 ラス 朗 付 訟 了 す ・f、 ま た は rght を 指定 し た と き は 、 テ ー ブ ル に 続く テキ スト が テ 

ー 42 oN ー ブ ル の 横 に 回 り 込 み ま す . 回 り 込み を 解除 する に は 、 <bry> タ グ の 
水曜 基礎 ク 2 ラス 募集 中 clear 属 性 を 使用 し ます . デフ ォ ル ト は allign=" lsf "で す が 、 こ の 属性 
金曜 応用 クラ ス 今期 休講 が 指定 され て いな いと テキ スト は 回 り 込み ませ ん 。 

た だ し 、 align 属 性 は 推奨 し な い 属 性 に 指定 され て お り 、 代わ り に ス 

タイ ル シ ー ト を 利用 する よう 推奨 され て いま す . 使用 に は 注意 し て くだ さい . 


忠昌 クラ ス 状況 
align 属 性 で テー ブル の 配置 を 左右 、 中 央 の いす れ か に 配置 し ま 
す . left、 また は right を 指定 し た と き は 、 テー ブル に 続く < テキ スト が テ 月 曜 入門 クラ ス 受付 終了 
ー ブ ル の 横 に 回 り 込 み ま す . 回 り 込 み を 解除 する に は 、 <b> タ グ の 水曜 基礎 2 ラス 募集 中 
clear 属 性 を 使用 し ます . デフ ォ ル ト は align="laft" で す が 、 こ の 属性 金曜 "応用 クラ ス 今期 休講 
が 指定 され て いな いと テキ スト は 回 り 込み ませ ん . 
た だ し 、align 属 性 は 推 奨 し な い 属 性 に 指定 され て お り . 代わ り に スタ イル シー ト を 利用 する よう 推奨 され て いま 
す . 使用 に は 注意 し て くだ さい 。 


躍 日 クラ ス 状況 
月 曜 入門 クラ ス 受付 終了 
水曜 基礎 2 ラス 募集 中 
金曜 入門 クラ ス 今期 休講 


align 属 性 で テー ブル の 配置 を 左 、 右 . 中 央 の いずれ か に 配置 し ます . left、 また は right を 指定 し た と き は 、 テー ブ 
ル に 続く < テキ スト が テー ブル の 横 に 回 り 込み ます . 回 り 込み を 解除 する に は 、 <br> タ グ の clear 属 性 を 使用 し ま 


す . デフ ォ ル ト は align="left" で す が 、 この 属性 が 指定 され て いな いと テキ スト は 回 り 込み ませ ん . 








還 し ます 、 ] 
りす る に は の 性 を 
て | r 属 
(NG が この 放任 が 】8 定 Sct、 


し 属性 に 指定 され て お り 、 代わ り に スタ イ 








8 ーー align 同性 は 
ルン ー ト を 利用 する よう 推 時 され て いま す 、 全 用 に は 注 中 し て くだ さい 。 





align 属 性 で テー ブル の 配置 を 左 、 右 、 中 央 の いずれ か に 配置 し ます 。 
let、 また は right を 指定 し た と き は 、 テー ブル に 続く < テキ スト が テー ブル 
の 横 に 回 り 込 み ま す . りみ を 全 台 する は <br> タ グ の clear 属 性 を 
使用 し ます . RE lsf" で す が 、 この 属性 が 指定 され て い 応用 ウラ ス 


な いと テキ スト は 回 ちい 
E は 推 し い 人 性 に 指定 され て お り 、 代わ り に スタ イル シー ト を 利用 する よう 推奨 よね て いま す . 使用 





た だ し 、align 属 
に は 注意 し て くだ さいし 





[中 日 | 2 ラス 
上 忠 ウラ ス 展 付 終了 
丁 クラス 隊 集 中 
クラス | は 期 休 講 | 
align 属 性 で テー ブル の 配置 を 左 、 右 、 中 央 の いずれ か に 配置 し ます left、 また は right を 指定 し た と き は 、 テーブル に 続 | 
く テ キス ト が テー ブル の 模 に 回 り 込 み ま す . 回 り 込 み を 解除 する に は 、<br ィ プ の olaer 財 性 を 使用 し ます 。 デフ ォ ルト は | 
r= ls" です, が この 属性 が 指定 され で いな いと ケ キ スト は 回 り 込ま 人 


ーー 代わ り に スタ イル シー 人 利用 する よう 椎 長 れ て いま す - 使用 
だ さい 

















で コー 
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時 に テキ スト を 回 り 込 ませ た い 
ピピ 示 輝 テー ブル に 対す る 回 り 込み を 解除 し た い …・………p.205 













人 記 TABlE 上 連 由季 um 避 
テー ブル に 対す る 回 り 込み を 解除 し た い 


<br clear=""> 





太 eeeeeeall、left、riqht 


テキ スト の 回 り 込み (前 項 ) を 解除 し て 、 そ れ 以 降 の テキ スト は テー ブル の 下 の 行 か ら 続 けた 
いと き は 、<br> タグ に clear 属性 を 指定 し ます 。 値 と 効果 は 以下 の 通り で す 。 
left テー ブル が 左側 に ある と き (<table align="left">) の 回 り 込み を 解除 
right テー ブル が 右側 に ある と き (<table align="right">) の 回 り 込み を 解除 
al どちら の 場合 に も 有効 


<table border="1" align="right"> 
<tr><th> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr> <td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr> <td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr><td> 金曜 </td><td> 応用 クラ ス </td><td> 今期 休講 </td></tr> 
</table> 
<PD テ > 
align 属性 で テー ブル の 配置 を 左 、 右 、 中 央 の いずれ か に 配置 し ます 。left、 ま た は right を 指 
定 し た と き は 、 テ ー ブ ル に 続く テキ スト が テー ブル の 横 に 回 り 込み ます 。 
<br clear="right"> 
テキ スト の 回 り 込 み を 解除 し て 、 そ れ 以 降 の テキ スト は テー ブル の 下 の 行 か ら 続け た いと き 
は 、&ltzbr&qt: タ グ の clear 属性 を 指定 し ます 。 
</P> 











テー ブル に 対す る 回 り 込み を 解除 し た い 


に さい [ 





当 テー ブル に 対す る 回 り 込み を 醍 際 し た い - Microsoft Imternet Explorer 
アイ ル (E) 編集 表示 お 気に入り ⑯ ツー ル D へ ルプ ⑪ 


@ 束 の 回 回 人 の 誠 pm0 軸 デ の の は - あ 回 


人 生 革 科 コト 右 、 いい 中 晶 クラ ス 状況 
『 水曜 基礎 クラ ス 募集 中 

金曜 応用 クラ ス 今期 休講 
テキ スト の 回 り 込 み を 解除 し て 、 そ れ 以 降 の テキ スト は テー ブル の 下 の 行 か ら 続 け 
た いと き は 、<br> タ グ の clear 属 性 を 指定 し ます 。 


テー ブル に 対す る 回 り 込 み を 杉 除 したい - Netscape 6 


人 で ー ブ ル の 攻 を yr 
前 ます 、gfR、 ま た は ngit を 指定 た と き は 、 テ ー ブ ル 
テキ スト が テー ブル の 機 に 回 り 込み ます 


テキ スト の 回 り 込み を 解除 し て 、 それ 以降 の テキ スト は テー ブル の 下 の 行 
き は 、<br> タ グ の clear 属 性 を 指定 し ます 。 





に いい 
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CSS に よる 回 り 込 み と そ の 解除 スミ ミミ ミミ トミ オメ オミ ミミ ミミ ミミ トミ メス ミ ミミ ミミ トミ ミミ スミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ メス ま 】 


スタ イル シー ト を 利用 し て 同様 に テー ブル に テキ スト を 回 り 込 ませ 、 ま た その 回 り 込 み を 解除 する 場合 
は 、 一 例 と し て 次 の よう に な り ま す 。 スタ イル シー ト に つい て 詳し く は 、 本 書 姉妹 書 『 ス タイ ル シ ー ト 辞 
典 第 3 版 』 を 参照 し こく だ さい 。 





<style type="text/css"> 


table tfloat:rght} 
br#rmight {clear:nght} 
</style> 

<body> 


<table border="1" align="right"> 
<tr><th> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr><td> 金曜 </td><td> 応用 クラ ス </td><td> 今期 休講 </td></tr> 
</table> 
<D> 
align 属性 で テー ブル の 配置 を 左 、 右 、 中 央 の いずれ か に 配置 し ます 。left、 ま た は right を 指定 し た と き は 、 テ 
ー ブ ル に 続く テキ スト が テー ブル の 横 に 回 り 込み ます 。 
<br id="night"> 
テキ スト の 回 り 込み を 解除 し て 、 そ れ 以 降 の テキ スト は テー ブル の 下 の 行 か ら 続け た いと き は 、&lt:br&gt: タ グ 
の clear 属性 を 指定 し ます 。 




















</D> 
</body> 
oeoeeeeeeooeoeeeeeeeeeee る Seoeeeoeoeeeeeeeoee る ooooeeeeeeeeeoeee 
1 1 1 三 基 -]】 IE6 NN4 ドド し に ルコ 
O O O O O O O 
参照 画像 に 対す る 回 り 込 み を 解除 し た い ・…・…………・… p.138 テー ブル と テキ スト の 間隔 を 指定 し た い ・…………… p.208 


テキ スト に 対す る テー ブル の 位置 を 指定 し た い ・…・p.208 


テー ブル に 対す る 回 り 込 み を 解除 し た い 


に いで [| 
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6 se 1 HTML4.01 規格 外 
テー ブル と テキ スト の 間隔 を 指定 し た い 


<table vspace=" 太 " hspace=" 巡 " aign=" 多 "> て </table> 





es 織 方 向 の 間隔 (ビク セル ) 
-:・…… 横 方 向 の 間隔 (ビク セル ) 
る ……・left、right 






テキ スト の 回 り 込 み を 設定 し た と き の 、 テ ー ブ ル と 周囲 の テキ スト と の 間隔 を 指定 し ます 。 
Netscape Navigator が 独自 に 拡張 し た 属性 で す が 、Netscape 6 で 対応 し な く な り ま し た 。 


<table border="1" align="left" vspace="15" hspace="30"> 

<tr> <th> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 

<tr><td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 

<tr><td> 水曜 </td> <td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 

<tr> <td> 金曜 </td> <td> 応用 クラ ス </td><td> 今期 休講 </td></tr> 
</table> 
<D テ > 
align 属性 で テー ブル の 配置 を 左 、 右 、 中 央 の いずれ か に 配置 し ます 。left、 ま た は right を 指 
定 し た と き は 、 テ ー ブ ル に 続く テキ スト が テー ブル の 横 に 回 り 込 み ま す 。 テ ー ブ ル と 周囲 の 
テキ スト と の 間隔 を 指定 する に は vspace 属性 と hspace 属性 を 使い ます 。Netscape 
Navigator の 独自 拡張 で す が 、Netscape 6 で は 対応 し な く な り ま し た 。 
</D> 








に いで 





208 テー ブル と テキ スト の 間隔 を 指定 し た い 





強 テー ブル と テキ スト の 周 大 を 指定 し た い - Microsoft Internet Explorer 


プア イル) 編集 D 表示 お 気 に 入 D⑱ ツー ル ① ヘル プ ⑪ 


@ 束 ・ の 6 回 回 の の 球 到 sm 倫 セ の の 代 ・「 


曜日 クラ ス 状況 algn 属 性 で テー ブル の 配置 を 左 、 
月 曜 入門 クラ ス 受付 弘 了 右 、 中 央 の いずれ か に 配置 し ます 
1 の り 條 jeft、 ま た は right を 指定 し た と き は 、 
水曜 基礎 クラ ス 募集 中 ニー ブ 


テー ブル に 続く < テキ スト が テー ブル 

金曜 応用 クラ ス 今期 休講 の 横 に 回 り 込 み ま す 。 テー ブル と 周 

囲 の テキ スト と の 間隔 を 指定 する に 

は vspace 属 性 と hspace 属 性 を 使い ます 。 Nstscape Navigator の 
独自 拡張 で す が 、 Netscape 6 で は 対応 し な く な り ま し た 。 








。 フ イル (F) 編集 (E) 表示 (V) 検索 ジャ ンプ ⑯) ブッ クマ ー ク (B) 2 が D ルプ ⑬ 


、Q.@ Q⑳ @⑨ osacascrcox=] Wa で oo 還 


隆 日 | 2 ラス | 状況 用 gn 属性 で テー ブル の 配置 を 左 、 右 、 中 


は の いずれ か に 配置 し ます 。 lsft、 また は right 
還 間 2 受付 終了 人 し た は | 








き 
ガイ ド 印刷 。 セキ ュ リティ 
lign 属 も を 左 、 

証 日 2 ラス | 状況 | の しい すれ か り に 計 し ます 。ER また 
月 曜 入門 クラ ス 受付 終了 * ょ 区 0 定 し た Mc 
パテ ー ブ 財 | り 込 み ま 
水曜 革 呆 グ ラス 募集 中 ー ブ ル と 周囲 の テキ スト と の 間 随 
金曜 応用 クラ ス 今期 休講 を する に iemor 央 性 fhoree 


ーー Navigator の : 
mm 人 








人 Netscape Navigator 4.7 以前 で は この よう に 表示 され ます 





1 1 ゴ コ ) 1 た 】 1 ミコ NN4 


多 ※ ※ 6 O メ 





テキ スト に 対す る テー ブル の 位置 を 指定 し た い ・…・p.208 
テー ブル に 対す る 回 り 込み を 解除 し た い …………… p.205 


テー ブル と テキ スト の 間隔 を 指定 し た い 


に | 
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テー ブル の サイ ズ を 指定 し た い 


<table width=" 娘 " height=" 寺 "> て </table> 











壇 *ssss* テ デー ブル の 幅 (ビク セル また は %) 
rw テー ブル の 高 さ (ビク セル ) 






width 属性 で テー ブル 全体 の 幅 を 指定 し ます 。 バ パー セン ト で 指定 する と ブラ ウザ の ウィ ンド ウ 
サイ ズ に 対す る 割合 と な り 、 ブ ラウ ザ の 大 き さ が 変わ れ ば テー ブル の 大 き さ も 変わ り ま す 。 ピ ク 
セル 数 で 指定 する と 指定 され た 大 き さ で 固定 され ます 。 

また 、 ブ ラウ ザ に よっ て は <table> タグ に 対し て height 属性 を 設定 する こと で テー ブル 全体 
の 高 さ を 指定 する こと も で きま す が (ビク セル 指定 の み )、 こ の 方 法 は HTML4.01 で は 定義 され 
て いま せん 。 テ ー ブ ル の 高 さ を 指定 する と き は 、 ス タイ ル シ ー ト も し く は <th> タグ や <td> タグ 
の 属性 と し て 定義 され て いる height 属 性 (次 項 参照 ) を 利用 し た ほう が よい で し ょ う 。 





<table border="1" width="50%"> 
<tr><th> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr> <td> 月 曜 </td> <td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td> <td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr><td> 金曜 </td> <td> 入門 クラ ス </td><td> 今期 休講 </td></tr> 
</table> 
<br> 
<table border="1" width="350" height="200"> 
<tr><th> 曜日 </th><th> クラ ス </th><thz> 状況 </th></tr> 
<tr><td> 月 曜 </td> <td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td> <td> 募集 中 </td></tr> 
<tr><td> 金曜 </td><td> 入門 クラ ス </td> <td> 今期 休講 </td></tr> 
</table> 


に に に 











210 “テー ブル の サイ ズ を 指定 し た い 


到 テ 
アイ ル G 甘 集 6) 表示 お 気 に 和 AD⑯ ウー ル D へ M プ 0⑪ 


支 sm2o W な 7 の ラー。 回 ・。 


曜日 ダラス 状況 
月 曜 。 入門 クラ ス 受付 終了 
水曜 。 基礎 クラ ス 募集 中 


SW 人 


クラ ス 


ブル の サイ ズ を 指定 し た い Microspft Imternet Explorer 


臣 日 
月 曜 入門 クラ ス 
水曜 基礎 クラ ス 


金曜 入門 クラ ス 


























月 曜 2 ラス 


kg 





耳 層 叶 クラ ス 


陸中 








谷 "2 ラス 


疹 人 








人 Netscape も 同様 で す が 、height 属性 を 指定 する と 下 枠 の 太 さ が 変わ る な どの 現象 が 起こ り ま す 








テ 
L 
ブ 
U2 
1! IE5 1 王寺 IE6 NN4 NN4.7 N6.2 
O O O O O O 人 
※ Netscape 6 は 正常 に 表示 され ます 
セル の サイ ズ を 指定 し た い ………ーーーーーーーー p.212 セル の 間隔 や マー ジン を 指定 し た い ……・………… p219 
に” セル 内 の テキ スト の 位置 の 指定 を し た い …………… p216 
テー ブル の サイ ズ を 指定 し た い 211 









8⑧ TABIE 。 "mrmmcarp 
セル の サイ ズ を 指定 し た い 
<th width=" 大 "height=""> て </th> 

<td width=" 廊 "height=" 交 "> て </td> 


文 eee セ ル の 横幅 (ビク セル ) 
we セル の 高 さ (ビク セル ) 














<th> タグ 、<td> タグ に width 属性 や height 属性 を 指定 する と 、 セ ル の 横幅 や 高 さ を 指定 す 
る こと が で きま す 。 


<D> 

上 が デフ ォ ル ト 

</P> 

<table border="1"> 
<tr> <th> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr> <td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr><td> 金曜 </td> <td> 応用 クラ ス </td> <td> 今期 休講 </td> </tr> 

</table> 

<br> 

<table border="1"> 
<tr><th height="80"> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr> <td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr> <td> 金曜 </td><td width="200"> 応用 クラ ス </td><td> 今期 休講 </td> 
</tr> 

</table> 


に いさ ピ || 











212 セル の サイ ズ を 指定 し た い 


て を 指定 し た いい Mjcrosoft Intern 


アイ ル ) 編集 5) 表示 お 気 に 入 DQ ウー ル ① へ ルプ ⑪ 


OO 引合 の wa 交 poo Wo の ら - 皿 ・ ロ 
上 が デフ ォ ル ト 


曜日 クラ ス 状況 
月 曜 入門 クラ ス 受付 終了 
水曜 基礎 クラ ス 募集 中 
金曜 応用 クラ ス 今期 休講 


曜日 クラ ス 
月 曜 入門 クラ ス 


水曜 基礎 クラ ス 
金曜 応用 クラ ス 




















に だ | 








参照 テー ブル の サイ ズ を 指定 し た い 
ち ” セル 内 の テキ スト の 位置 を 指定 し た い ・…- 








ET トコ イッ し 3 り リコ ヨコ ココ ゴザ: ヨリ 
キャ プシ ョ ン を つけ た い 


<caption> や </caption> 
<caption align=" 文 "> で </caption> 














云 *eeeeetOD、bottom 


テー ブル に キャ プシ ョ ン (タイ トル ) を つけ る に は <caption> タグ を 使用 し ます 。 デフ ォ ル ト 、 
つま り 位 置 を 指定 し な い 場 合 は 、、 キ ャ ブシ ョ ン は テー ブル の 上 部 に セン タリ ング し て 表示 され ます 。 

align 属性 を 使う こと キ ャ プシ ョ ン の 位置 を 指定 する こと が で きま す 。top で は テー ブル の 上 部 、 
bottom で は テー ブル の 下部 に 、 そ れ ぞ れ セ ンタ リン グ し て 表示 され ます 。 


<table border="1"> 
<caption> 受付 状況 </caption> 
<tr> <th> 曜日 </th> <th> クラ ス </th><th> 状況 </th></tr> 
<tr> <td:> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td> <td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr> <td> 金曜 </td> <td> 応用 クラ ス </td> <td> 今期 休講 </td></tr> 
</table> 
<br> 
<table border="1"> 
<caption aliqgn="bottom"> 受付 状況 </caption> 
<tr> <th> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr> <td> 水曜 </td> <td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr> <td。> 金曜 </td><td> 応用 クラ ス </td><td> 今期 休講 </td></tr> 
</table> 





に い ピ || 








214 "キャ プシ ョ ン を つけ た い 


| 陸 


了 














受付 状況 
躍 日 クラ ス 状況 
月 曜 入門 クラ ス 受付 終了 
水曜 基礎 クラ ス 募集 中 
金曜 応用 クラ ス 今期 休講 









曜日 クラ ス 状況 
月 曜 入門 クラ ス 受付 終了 
水曜 基礎 クラ ス 募集 中 
金曜 応用 クラ ス 今期 休講 
受付 状況 

















1 ズ 】 1 IE5.5 





1 ミコ ゴ 


NN4 


NN4.7 
O 


[ルコ 
O 





に さい 





<tr align=" 文 "valign=" 均 "> て </tr> 


<th align=" 文 " valign=" 六 "> て </th> 
<td align=" 廊 " vaign=" 近 "> て </td> 





太 eeeeeeleft、center、right 
広 seeeeetop、middle、bottom、baseiine 





セル 内 の デー タ が 表示 され る 位置 を 指定 する に は 、align 属性 と valign 属性 を 使い ます 。 
align で は デー タ の 行 揃え ( 横 方 向 ) を 指定 し 、valign で は 垂直 方 向 ( 縦 方 向 ) を 指定 し ます 。 
値 の 意味 は 以下 の 通り で す 。 


left 左 揃え 

center 中 央 揃え 

right 右 揃 え 

top 

middle 中 央 

bottom ド 

baseliine 横 方 向 の デー タ の ベー スラ イン 基準 。 各 セル 内 の 1 行 目 の ベー スラ イン を 
揃え る 


デフ ォ ル ト は align="left"、valign="middle" で す 。 


の (リモ ゴリ ロロ オ 1 ミミ トミ スミ スミ ミミ スミ ミネ ミミ よ 】 OKEKTTYLYKLKSKEKK ミ スス スス ミミ スミ ミミ ミミ ミ ) エエ ナミ ミミ ミミオ) 


行 を グル ー プ 化す る <thead>、<tbody>、<tfoot> タグ (p.238 参照 ) や 列 を グル ー プ 化す る <col> 
や <colgroup> タグ (p.240、242 参照 ) で も 同様 に align 属性 と valign 属性 を 指定 する と 、 セ ル の 中 の 
テキ スト 位置 を 指定 する こと が で きま す 。 


POOLKKKKEEKXKAXI COLOCIIITKXAXYAAI POKERRRKAAAALLARRRSNJ OCRKKKTXLXRI 


テ 

上 
ピ 
ル 














<div aign="center"> 
<table border="1" width="300"> 
<caption> セル の 中 の テキ スト の 位置 指定 </caption> 
<tr> 
<td align="left" valign="top" height="100"> 左上 </td> 
<td align="center" valign="top"> 上 中 </td> 
<td align="right" valign="top"> 右上 </td> 
</tr> 
<tr> 
<td align="left" valign="middle" height="100"> 左 </td> 
<td align="center" valign="middle"> 真中 </td> 
<td align="right" valign="middle"> 右 </td> 
</tr> 
<tr> 
<td align="left" valign="bottom" height="100"> 左下 </td> 
<td align="center" valign="bottom"> 下 中 </td> 
<td aign="right" valign="bottom "> 右 下 </td> 
</tr> 
</table> 
</div> 











に い ビ | 
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良 セル 内 の テキ スト の 位 軒 を 指定 し た い ) - Micrpsoft Interne 


GO 国司 人 の の we 支 5moo 全 7 の の ら - 


セル の 中 の テキ スト の 位置 指定 
左上 上 中 | 右上 








1 り p も あ 4 リ 指定 し た い - Netscape 6 


| 。 アイ ル (E) 識 集 (E) 表示 (V 検索 ) ジャ ンプ ⑬ ブッ 2 マー2(B) 222D へ ルプ ⑪ 


セル の 中 の テキ スト の 位置 指定 
記 半 中 dl 

















に さい に [ 








テー ブル の サイ ズ を 指定 し た い 
スジ セル の サイ ズ を 指定 し た い 





11 
セル の 間隔 や マー ジン を 指定 し た い 


<table cellspacing=" 文 " cellpadding=" 近 "> て </table> 











大 *ees セ ル の 間隔 (ビク セル ) 
ecce セ ル 内 の マー ジン (ピク セル ) 






cellspacing は テー ブル の 外 枠 と セル 、 お よび セル と セル の 間隔 を 指定 し ます 。 外 見 的 に は テ 
ー ブ ル の 各線 の 太 さ が 変更 され た よう に な り ま す 。 
cellpadding は セル の 枠 と セル 内 の 内 容 と の 間隔 (マー ジン ) を 指定 し ます 。 


<table border="1" cellspacing="0" cellpadding="0"> 
<tr><th> 曜日 </th><th> クラ ス </th></tr> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td></tr> 
</table> 
<br> 
<table border="1" cellspacing="10" cellpadding="0"> 
<tr><th> 曜日 </th><th> クラ ス </th></tr> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td></tr> 
</table> 
<br> 
<table border="1" cellspacing="0" cellpadding="10"> 
<tr> <th> 曜日 </th><th> クラ ス </th></tr> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td></tr> 
</table> 
<br> 
<table border="1" cellspacing="10" cellpadding="10"> 
<tr><th> 曜日 </th><th> クラ ス </th></tr> 
<tr> <td> 月 曜 </td><td> 入門 クラ ス </td></tr> 
</table> 
<br> 








セル の 間隔 や マー ジン を 指定 し た い 


に いい 


219 


<table border="10" cellspacing="10" cellpadding="10"> 
<tr><th> 曜日 </th><th> クラ ス </th></tr> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td></tr> 

</table> 











午 セル の 間 防 や を 指定 し た ロ | 


アイ ル (E) 編集) 表示 ) お 気 に ADO⑳ \* 
@m- の 回 回 る 「 ら " 


貴 日 クラ ス 
月 曜 入門 クラ ス 


セル の 間隔 や を 指 3 ロ | 


| アイ ル 給 集 ) 表示 検索 ) ウ ャ ンプ ⑬ プッ 2 マ 
3. 0 ⑳ OK 回 






曜日 クラ ス 
月 曜 入門 クラ ス 







曜日 クラ ス 
| 月 躍 入門 クラ ス | 


IE 


に 医家 







曜日 クラ ス 








月 曜 入門 クラ ス 


クラス 
クラ ス 
入門 クラ ス 






曜日 クラ ス 


本 
[mm 






月 曜 | 入門 クラ ス 










| 短 ] ペー ジ が 表示 され 暫 イン ター ネッ ト 








で コーH 







lspacing と cellpadding は この よう 
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テー ブル の サイ ズ スミ ミト ミミ まま ミス ミス スミ スス トス ミス スミ スミ ミミ ミス ミス ミスミ スミ ミス ミミ ミミ ミミ メメ ミミ ミミ スミ メメ ミミ まま すま 】 


border、cellspacing、celpadding 属性 の 指定 は テー ブル の サイ ズ に 影響 を 与え ます 。width 属性 や height 
属性 で テー ブル の サイ ズ を 指定 する 際 は 、 こ れ ら の 属性 の 値 も 考慮 に 入れ る よう に し まし ょ う 。 


<table border="5" cellspacing="10" cellpadding="15"> 
<tr> 

<td width="100"> セ ル 1</td> 

<td width="100"> セル 2</td> 

</t> 

<tr> 

<td> セル 3</td> 

<td> セル 4</td> 

</tr> 

</table> 






| | セル 1 セル 2 


| 
| ua セル 4 


この よう な ソー ス で で きる テー ブル は 下 の よ うに な り ま す 。 





つま り テ ー ブ ル 全体 の 横幅 は 
5+10+1+15+100+15+1+10+1+15+100+15+1+10+5=304 (ビク セル ) 
と な り ま す (「1」 は セル の 内 側 の 影 の 部 分 で す )。 


CONIKRKTLRLKK は NKKKKKK ス KK ミミ ミミ KKKIKK ミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ トメ ミミ ミミ ミミ トメ トメ IKEIESXSJ】 


に いい 





1 | 1 王 二 】 IE6 ド い し ドド に 和 』 に に ルコ 

Oo O Oo O O O Oo 
か 任 迷 の 幅 を 指定 し た い ……ーーーーーーーーーーー pi200 セル の サイ ズ を 指定 し た い ………… ドー pa18 
コジ テー ブル の サイ ズ を 指定 し た い … ーーーー p.810 セル 内 の テキ スト の 位置 を 指定 し た い …………… pa16 





12 
枠 線 の 色 を 指定 し た い 


<table border bordercolor=" 丸 "> ぐ </table> 
<table border bordercolorlight=" 文 " bordercolordark=" 丸 "> </table> 


MDUIEAUE ! 3 避 











丸 *eees 色 指定 値 (#rrggbb)、 ま た は 色 名 (colorname) 






テー ブル の 枠 線 の 色 を 指定 する に は 、<table border> に bordercolor、bordercolorlight、 
bordercolordark の 加 属 性 を 付け ます 。 

bodercolor 属性 は 、 枠 線 全体 の 色 を 一 色 で 指定 し ます 。 

bordercoorlight 属性 と bordercolordark 属性 を 使う と 、 色 を 使い 分 け て 立体 的 な 枠 線 の テ 
ー ブ ル を 表現 で きま す 。 





<table border="10" bordercolor= "green"> 
<tr><thz> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr> <td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr> <td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr> <td> 金曜 </td><td> 応用 クラ ス </td><td> 今期 休講 </td></tr> 
</table> 
<br> 
<table border="10" bordercoloriight= "ff6600" 
bordercolordark="#0000ff"> 
<tr><th> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td> <td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td> <td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr> <td> 金曜 </td><td> 応用 クラ ス </td><td> 今期 休講 </td></tr> 
</table> 


に に 








222 桁 線 の 色 を 指定 し た い 


出 請 組 


上 33 人 
| 2 


| 状況 | 
還 付 終了 | 
募集 中 | 
今期 休講 | 








ウラ ス 
入門 クラ ス | 
基礎 クラ ス 
応用 クラ ス 


















































曜日 | クラ ス 
月 曜 入門 クラ ス 
穫 抽 9 













4 Netscape は bordercolor 属 性 に 不 完全 に 対 
応 、bordercolorlight 属性 と bordercolordark 属 
性 に は 対応 し て いま せん 




















テ 
上 
4 
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に いい ピ [| 


<table frame=" 太 "> て </table> 





文 *eeeeeVoid、above、below、hsides、vsides、Ihs、rhs、box、border 





frame 属性 で 、 テ ー ブ ル の 外 枠 線 の 表示 方 法 を 設定 する こと が で きま す 。 次 の よう な 値 を と り 

















































































































ます 。 

void 外 枠 な し (デフ ォ ル ト ) 

above 上 の み 

below 下 の み 

hsides 上 下 の み 

Vsides 左右 の み 

lhs 左側 の み 

rhs 右側 の み 

box 外 枠 す べ て 

border 四辺 の 縁取 り 
曜日 | クラ ス | 状況 四 日 | 2 クラス | 状況 。 躍 日 クラ ス | 状況 
月 曜 | 入門 クラ ス | 付 終了 月 曜 | 入門 クラ ス | 受 付 終了 月 曜 | 入門 クラ ス | 受 付 終 了 
水曜 | 基礎 クラ ス | 募 集中 水曜 | 差 礎 ク ラス 募集 中 水曜 | 基礎 クラ ス | 募集 中 
金曜 | 応用 クラ ス | 今 期 休 講 金曜 | 応用 クラ ス | 今期 休講 金曜 | 応用 クラ ス | 今 期 休 講 
4void 4above AS ジー 
曜日 | クラ ス 状況 曜日 クラス 状況 曜日 クラ ス 状況 
月 曜 | 入門 クラ ス | 受付 終了 月 曜 | 入 門 クラ ス | 受付 終了 月 曜 | 入門 クラ ス | 受付 終了 
水曜 | 基礎 クラ ス | 募 集中 水曜 | 基礎 クラ ス | 募 集中 水曜 | 基礎 クラ ス | 募集 中 
金曜 | 応用 クラ ス | 今期 休講 金曜 | 応用 クラ ス | 今 期 休 講 金曜 | 応用 クラ ス | 今期 休講 
4hsides 4^vsides Alhs 
曜日 | クラ ス | 状況 曜日 | クラ ス | 状況 クラ ス | 状況 
月 曜 | 入門 クラ ス | 付 終了 月 曜 | 入門 クラ ス | 受付 終了 入門 クラ ス | 受 付 終了 
水曜 | 基礎 クラ ス | 募集 中 水曜 | 基礎 クラ ス | 募集 中 基礎 クラ ス | 募 集中 
金曜 | 応用 クラ ス | 今期 休講 金曜 | 応用 クラ ス | 今 期 休 講 | 応用 クラ ス | 今 期 休 講 


^rhs 
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^box ^border 


92891 





</table> 
<br> 
<table border="8" frame="vsides"> 





</table> 


<table border="3" frame="hsides"> 
<tr> <th> 曜日 </th><th> クラ ス </th> <th> 状況 </th></tr> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td> <td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 硬 礎 ク ラス </td> <td> 募集 中 </td></tr> 
<tr><td> 金曜 </td><td> 応用 クラ ス </td> <td> 今期 休講 </td></tr> 





<tr><th> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td> <td> 募集 中 </td></tr> 
<tr><td> 金曜 </td><td> 応用 クラ ス </td> <td> 今期 休講 </td></tr> 





双 外 杵 の 表示 方 洗 を 指定 し た い - Micr.. 記 | 暫 | 隊 
イル) 編集 ) 表示 お 気 に 和 OO \ 革 


@ ゃ ・ の 回 回 る の | ウ 


曜日 クラ ス 状況 
月 曜 入門 クラ ス 受付 終了 
水曜 基礎 クラ ス 募集 中 
金曜 応用 クラ ス 今期 休講 


曜日 クラ ス 状況 
月 曜 入門 クラ ス 受付 終了 
水曜 基礎 クラ ス 募集 中 
金曜 応用 クラ ス 今期 休講 














人 崩 曜 入門 クラ ス 展 付 終 了 
克 曜 匿 森 クラ ス 勝 集中 


阻 日 | クラ ス | 状況 


に に 「 





NN4 が ド C 和 4 が に ルス 





1 1 IE5.5 1 コガ 
O O O O 
参照 枠 線 の 幅 を 指定 し た い …… ド ドド ドド ーーー p.200 
2 内 側 著 線 の 表示 方 法 を 指定 し た い ・………………ー p.286 
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14 
内 側 守 線 の 表示 方 法 を 指定 し た い 


<table rules=" 文 "> て </table> 












廊 eeeeeenOhe、qFrOUDS、『OWS、 Cols、allL 


rules 属性 は 、 セ ル の 間 に 引 か れる 材 線 の 表示 方 法 を 設定 し ます 。 次 の よう な 値 を と り ます 。 


none 時 線 な し (デフ ォ ル ト ) 

drouDs thead、tfoot、tbody、colgrouD、col| の 境界 の み 
rows 横 の 列 の 境界 の み 

cols 縦 の 列 の 境界 の み 

all すべ て の 境界 





曜日 クラ ス 状況 
月 曜 入門 クラ ス 受付 終了 


曜日 クラ ス 状況 
月 曜 入門 クラ ス 受付 終了 
水曜 基礎 クラ ス 募集 中 水曜 基礎 クラ ス 募集 中 
金曜 応用 クラ ス 今期 休講 金曜 応用 クラ ス 今期 休講 


人 Anone 全 rOWS 


クラ ス 
入門 クラ ス 














基礎 クラ ス 
応用 クラ ス 


















































状況 曜日 クラ ス 状況 
入門 クラ ス | 受 付 終了 月 曜 入門 クラ ス 受付 終了 
基礎 クラ ス | 募 集中 水曜 基礎 クラ ス 募集 中 
応用 クラ ス | 今 期 休 講 金曜 応用 クラ ス 今期 休講 
備考 2 月 28 日 現在 
























































人 qrOuDS (この 値 は thead 等 を 指定 し 
な いと 効果 が あり ませ ん 。 図 は p.238 の 
サン ブル ソー ス を 元 に し た も の ) 


に と 
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<table border="3" rules="rows"> 


</table> 
<br> 
<table border="8" rules="cols"> 


</table> 





<tr><th> 曜日 </th><th> クラ ス </th><thz> 状況 </th></tr> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr><td> 金曜 </td><td> 応用 クラ ス </td><td> 今期 休講 </td></tr> 


<tr><th> 曜日 </th><th> クラ ス </th><thz> 状況 </th></tr> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 硬 礎 ク ラス </td><td> 募集 中 </td></tr> 
<tr> <td> 金曜 </td><td> 応用 クラ ス </td> <td> 今期 休講 </td></tr> 
















曜日 クラ ス 状況 
月 曜 入門 クラ ス 受付 終了 
水曜 基礎 クラ ス 募集 中 

金曜 応用 クラ ス 今期 休講 





曜日 クラ ス 状況 
月 曜 入門 クラ ス 受付 終了 
水曜 基礎 クラ ス 募集 中 

金曜 応用 クラ ス 今期 休講 
















居 | 入門 クラ ス 限 付 終 了 


上 丈 忠 


基礎 2 ラス | 了 募 集中 | 


| 護 中 応用 クラ ス | 其 休講 | 


曜日 | 2 ラス | 状況 

月 曜 | 入門 クラ ス 展 付 終 了 
不 曜 蘭 林 2 ラス 箕 集中 
殿 曜 | 応用 クラ ス | 今 期 休講 


ドキ ュ メ ルト : 


4^ Netscape は 対応 し て いま せん 





016 








1 子 1 三 】 IE5.5 1: ド い し 1 ド に いじ 符 4 ド に ルオ 
O O O ※ ※ 2 ※ 
和夫 の 幅 を 指定 し た い …ーーーーーー バ ーー p200 
ジア 外 枠 の 表示 方 法 を 指定 し た い ……ーーーーーーー p.2g4 
内 財 夏 線 の 表示 方 法 を 指定 し た い 


に | 
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| リコ ヨコ ェ コ の 9 ョ コリ 


<table bgcolor=" 文 "> </table> 


<tr bgcolor=" 太 "> て </tr> 
<th bgcolor=" 廊 "> て </th> 
<td bgcolor=" 文 "> て </td> 





文 *eees 色 指定 値 (#rrggbb)、 ま た は 色 名 (colorname) 





bgcolor 属性 で テー ブル の 背景 色 を 設定 し ます 。 

<table> タグ に 指定 し た 場合 は その テー ブル 全体 に 、<tr> タグ に 指定 し た 場合 は その 横 1 列 
( 行 ) に 色 が つき ます 。 

<th> タグ と <td> タグ に 指定 し た 場合 に は 、 そ の セル に の み 色 が つき ます 。 


<table border="2" cellpadding="15" bqcolor="#9966ff"> 
<tr><th bqcolor="#33ccff"> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr bgcolor="#ff9999"><td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 
</td></tr= 
<tr><td bgcolor="#cOcOc0"> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 
</td></tr> 

</table> 











ミコ ー ボ 




















CSS に よる テー ブル の 背景 色 の 指定 ECCCCCOLLUUUULKKTYKKKCLTKYKYKLYEKKKKKKKKYD 


スタ イル シー ト を 利用 し て 同様 に テー ブル の 背景 色 を 指定 する 場合 は 、 一 例 と し て 次 の よう に な り ま す 。 
スタ イル シー ト に つい て 詳し く は 本 書 姉妹 書 「 ス タイ ル シ ー ト 辞典 第 3 版 』」 を 参照 し こく だ さい 。 


<style type="text/css"> 
table tbackground-color:#9966ff 
th#sample1 {backqround-color:#33ccf 
tr#sample2 {backqround-color:ff9999} 
td#sample3 {backqround-color:#c0c0c0} 
</style> 
<body> 
<table border="2" cellpadding="15"> 
<tr><th id="sample1"> 曜 日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr id="sample2"><td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td id="sample3"> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
</table> 





</body> 
1 務 】 | 王 ]】 1 王 基 】 IE6 NN4 NN4.7 ド に 入 
@】 O O O O O O 
か 色 を 指 定 し た い ツー バー バー バー .74 テー ブル の 背景 画像 を 指定 し た い 
販 ” 福 線 の 色 を 指定 し た い ・… セル の 痛 景 画像 を 指定 し た い ……ーーーーーー . 





に に い 「 
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で コー 







16 _ … ぶ の 較 
テー ブル の 背景 画像 を 指定 し た い 


<table background=" 文 "> て </table> 





支 *eees 画 像 ファ イル 名 (URL) 






background 属性 で テー ブル の 背景 に 画像 を 貼り 込む こと が で きま す が 、 ブ ラウ ザ に よっ て 表 
示方 法 が 異な る の で 注意 が 必要 で す 。 

Internet Explorer と Netscape 6 で は テー ブル 全体 を 基準 に 画像 を 貼り 込む た め 、 セ ル の 大 
き さ や 数 に は 関係 な く 画 像 が 表示 され 、 画 像 が 小 べ けれ ば タイ ル 状 に 並べ られ ます 。 こ れ に 対し 、 
Netscape Navigator 4.7 以前 で は 各 セ ル ご と に 画像 を 表示 し ます 。 

HTML4.01 で は 定義 され て いな い 属 性 で す 。 





<table border="1" cellpadding="15" background="cat.qif"> 
<tr> <th> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr> <td> 月 曜 </td><td> 入門 クラ ス </td> <td> 受付 終了 </td></tr> 
<tr> <td> 水曜 </td><td> 基礎 クラ ス </td> <td> 募集 中 </td></tr> 
<tr><td> 金曜 </td><td> 応用 クラ ス </td><td> 今期 休講 </td></tr> 
</table> 








230 。 テー ブル の 背景 画像 を 指定 し た い 


当 テー ブル の 背景 画像 を 指定 し た い - Microsoft Internet Explorer 
アイ ル (F) 編集) 表示 お 気に入り ツー ル D ん ルプ ⑪ 


@ 京 ・ の i 引 の の ws 家 pmoo のち の の 全 - あ 回 ・』 











画 化 を 指定 し た い - Netscape 6 


ドキ ュ メ ント : 寺 了 0191 秒 》 








に に に 














1 1 1 主計 】 1 ミコ NN4 NN4.7 が に ル 4 
O O O O O O O 





p.76 テー ブル の 背景 色 を 指定 し た い ・ 
*DP.186 セル の 背景 画像 を 指定 し た い ・…・ 





背景 に 画像 を 設定 し た い ・ 
画像 を 表示 し た い 
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HTML4.01 規格 外 隔 


<tr background=" 太 "> て </tr> 


<th background=" 文 "> て </th> 
<td background=" 太 "> て </td> 





支 *eees 画 像 ファ イル 名 (URL) 





<tr>、<th>、<td> タグ の background 属性 で セル の 背景 に 画像 を 貼り 込む こと が で きま す 。 

<tr> タグ に 対し て 指定 する と 、 そ の 横 一 列 の 背景 と し て 表示 され ます 。 た だ し この 指定 は 
Netscape (Navigator) の み の 対 応 で 、Internet Explorer で は 対応 し て いま せん 。 

<th> タグ 、<td> タグ に 対し て 指定 する と 、 指 定 し た セル の 背景 と し て 表示 され ます 。 

いずれ の 場合 に も 、 画像 の 大 き さ が セル より も 小さ いと き は 、 繰り返し て タイ ル 状 に 並べ られ 
ます 。 

HTML4.01 で は 定義 され て いな い 属 性 で す 。 


<table border="1" cellpadding="15"> 
<tr> <thz> 曜日 </th><th background="cat.gif"> クラ ス </th><th> 状況 
</th></tr> 
<tr background="bg2.gif"><td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 
</td></tr> 
<tr><td background="bg3.gif"> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 
</td></tr> 

</table> 


で コー 
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Microsojft Internet Explorer 


アイ ル (?) 編集 ) 表示 め お 気に入り ⑯ ツー ル D へ ルプ ⑪ 


OR の 回 回 の の wa 支 pmoo の 7o の 


| 月 曜 | 入門 クラ ス | 受付 終了 


隊 wo 


























に | 














1 IE5 IE5.5 IE6 ドド し 守 4 ド に ル 】 
tr background ※ X し 3 し 4 O O 〇 
th background O O O O O O 
td background O O O O O O 
…""D.76 テー ブル の 背景 画像 を 指定 し た い ………………… p. ら 30 





背景 に 画像 を 設定 し た い 
テー ブル の 背景 色 を 指定 し た い ・…・ 





…・p.288 





| リコ ヨッ ミコ ツリ 隔 


<th nowrap> ぐ </th> 





<td nowrap> で </td> 

通常 、 テ ー ブ ル の 大 き さ は ブラ ウザ が 自動 的 に 調節 し 、 デ ー タ を 各 セ ル に うま く お さ め よ うと 
する た め 、 セ ル 内 の テキ スト が 長い 場合 に は 自動 的 に 改行 され て し まい ます 。 

この よう な 自動 改行 を し な いよ う 設 定 す る に は <th>、 <td> タグ に nowrap 属性 を 指定 し ます 。 
nowraD 属性 を 指定 し た と き と 指 定 し な いと き の 違 い を 、 下 の 例 で 比べ て みて くだ さい 。 


<table border="1" bgcolor="#99ff99"> 
<tr> <th> 曜日 </th><thz> 講座 内 容 </th></tr> 
<tr> 
<td> 月 曜 </td> 
<td> 初め て の か た を 対象 に 、 基 本 的 な 知識 や 道具 の 使い 方 な ど を 実際 に キッ ト を 使い な 
が ら 説 明 し ます 。8 回 で 終了 し た あと は 基礎 クラ ス へ 進む こと が で きま す 。</td> 
</tr> 

</table> 

<br> 

<table border="1" bgcolor="#99ff99"> 
<tr><thz> 曜日 </th><th> 講座 内 容 </th></tr> 
<tr> 
<td nowrap> 金曜 </td> 
<td nowrap> 初め て の か た を 対象 に 、 基 本 的 な 知識 や 道具 の 使い 方 な ど を 実際 に キッ ト を 
使い な が ら 説 明 し ます 。8 回 で 終了 し た あと は 基礎 クラ ス へ 進む こと が で きま す 。 </td> 
</tr> 

</table> 


で コー 
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イル 寺 表 W お REAOO ツール D へ AM プ 0 
@・ の 人 の の sR 支 sw 仙 ダ 7 の 3・ > 回 ・ 四 
























に 初め て の か た を 対象 に 、 拓本 科 キ ト い な が ら 表 
曜 明 じ ます 8 回 で 終了 し た あと は 差 礎 ク ラス へ 進む こと が で き 





較 講座 内 容 
金曜 初め て の か た を 対象 に 、 基本 的 な 知識 や 道具 の 使い 方 な ど を 実際 に キッ ト を 使い な が ら 説 






表示 お 気 に 入 0⑯ ウー ル D へ 2 
OR の Ma 人 の の ws 吉 5moo 界 字 7 の ・。 較 ・| 2 | 














を 実際 に キッ ト を 使い な が ら 説 
ます 、 


講座 内 容 
を 実際 に キッ ト を 使い な が ら 説 明 し ます . 8 回 で 導 了 し た あと は 差 確 クラ ス へ 進む こと が で きま す 。 


ニー ニー ニー ニー ニー ニニ ーー ニー ニー ニー ニー ニー ニニ ーーー ニー ニーーmー 





ベー フ が 表示 まし た 6 に イー ネト 











。 7f ル ⑥D 項 表示 検索 ⑨ porn 7- の ⑧ 2D へ ル 2⑩⑰ 


の OO の gcc 





| カイル) 電 三 D 表示 検索 ウ w ン ブ 0 プッ 2Yー2⑧ 220D へ ル 2⑪ 


GL ⑦ @⑨ Oc と cccctoxacacio =]RGW 症 So 








に に | 











1 1 1 王 た 】 1 コガ NN4 NN4.7 が に ルコ 
O O O O O O O 
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で い ーH 


<th rowspan=" 誠 "> て </th> 
<td rowspan=" 太 "> て </td> 





壇 *eeee 連 結 す る セル 数 





<th>、<td> タグ に rowSDan 属性 を 指定 する と 、 そ の セル か ら 指 定 さ れ た 数 の 下方 向 の セル 
を 連結 し て 、 ひ と つの セル に する こと が で きま す 。 





<table border="1"> 
<tr> <th> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
<tr> <td> 月 曜 </td><td> 入門 クラ ス </td><td rowspan="3"> 募集 中 </td></tr> 
<tr> <td> 水曜 </td><td> 基礎 クラ ス </td></tr> 
<tr> <td> 金曜 </td><td> 応用 クラ ス </td></tr> 
</table> 











アイ ル B Go FE 992 ェ 1 


@・ の 回 国人 


堅 日 クラ ス 。 状 況 」 
月 曜 入門 クラ ス 1 
水曜 基礎 クラ ズ 募集 中 ! 


金曜 応用 クラ ズ 』 





グラス 
入門 クラ 


に 募集 中 
心 用 クラ ス 』 















1 ゴ 3 1 1 王 和 】 1 ココ LC3 に いし 4 ド に ルオ 
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』 <th colspan=" 太 "> て </th> 
<td colspan=" 廊 "> て </td> 





丸 *eeee 連 結 す る セル 数 





<th>、<td> タグ に colspan 属性 を 指定 する と 、 そ の セル か ら 指 定 さ れ た 数 の 右 方 向 の セル を 
連結 し て 、 ひ と つの セル に する こと が で きま す 。 





<table border="1"> 
<tr><th> 曜日 </th><th> クラ ス </th> <th> 状況 </th></tr> 
<tr> <td> 月 曜 </td><td colspan="2"> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr> <td> 金曜 </td><td colspan="2"> 受付 終了 </td></tr> 
</table> 








強 模 方 向 に セル を 連結 し を た い - Mic.. 全 | 回 了 区 
アイ ル ⑥ 編集) 表示 お 気 に 和 L” 國 


@R・ の 回 還る の の 


四 日 _ クラ ス _ 状況 
月 曜 "受付 終了 


0 


に らい 「 
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<thead> で </thead> "テーブル の ヘッ ダ 
<tfoot> ぐ </tfoot> テー ブル の フッ タ 部 分 
<tbodV> </tbodV> "パテ ー ブ ル の 本 体 部 分 





テー ブル の 横 方 向 の 並び ( 行 ) を ヘッ ダ 、 フ ッ タ 、 本 体 と いう 3 つの 論理 的 な 構造 に 分 け 、 そ 
れ ぞ れ を まとめ て グル ー プ 化し ます 。 

この よう に グル ー プ 化す る こと で 、 現在 は その よう な 機能 を 持つ ブラ ウザ は あり ませ ん が 、 へ 
ッ ダ と フッ タ 部 分 を 固定 し た まま 本 体 部 分 だ け を スク ロー ル し た り 、 長 い テ ー ブ ル を 印刷 する 場 
合 、 各 ペー ジ に ヘッ ダ と フッ タ を つけ る こと な ど が 可能 に な り ま す 。<tbody> 部 分 は 1 つ に 限ら 
ず 複 数 配置 で を ます が 、 い ずれ の 場合 に も 必ず <thead><tfoot><tbody> の 順番 で 記述 し て く 
だ さい 。 こ れ は 本 体 部 分 が すべ て 表示 され る 前 に 、 フ ッ タ を 表示 で きる よう に する た めで す 。 


<table border="1"> 
<thead style="background-image:url('bg1.gif ) "> 
<tr><thz> 曜日 </th><th> クラ ス </th><th> 状況 </th></tr> 
</thead> 
<tfoot style="backqround-image:url('bg2.gif ) "> 
<tr><th> 備考 </th><td colspan="2">2 月 28 日 現在 </td></tr> 
</tfoot> 
<tbody style="background-image:url('cat.gif) "> 
<tr> <td> 月 曜 </td> <td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr> <td> 金曜 </td><td> 応用 クラ ス </td><td> 今期 休講 </td></tr> 
</tbodV> 
</table> 


に に So 

















衝 行 を ウル ー プ 化し た い - Microsoft Internet Explorer 


アイ ル (E) 編集) 表示 お 気 に 入 D⑯ ツー ル ① へ 中 ブ ⑬ 














NN 行 を リル ー ブ 化 し た (いい - Netscape 6 


| 


^ <tfoot> タグ は <tbody> タグ より 先 に 記述 し ます が 、<tbody> タグ の 部 分 の 下 に 表示 され ます 





に [ 








1 1 NN4 に に 軸 4 ドル 1 
O O X ※ (9 
参照 列 を グル ー プ 化し た いい ドド ドド p.240 
牧 ア 列 に まとめ て 属性 を 設定 し た い ………ーー…… p.242 


行 を グル ー プ 化し た い 239 





で コー 


240 


<colgroup 文 > </colqgroup> 





娘 *eeesSDan=" グ ルー プ 化 する 列 数 " (デフォ ルト は 1) 
width=" 列 幅 " (ピク セル 、%、*) 
align="left"、"center"、"right" 
valign="top"、"middle"、"bottom"、"baseline" 





縦列 の 構造 的 な グル ー プ 化 を 行い ます 。 

Span 属性 で グル ー プ 化す る 縦列 の 数 を 、width 属性 で 列 の 幅 を 指定 し ます 。 ま た 、align、 
Valign 属性 で グル ー プ 内 の デー タ が 表示 され る 位置 を 指定 し ます 。 終了 タグ </colgroup> は 省 
略 が 可能 で す 。 

この よう に グル ー プ 化す る こと で 、 複 数 の 縦列 に 対し て まとめ て スタ イル シー ト を 適用 し た り 、 
行 揃え や 色 の 変更 と いっ た HTML の 属性 を 指定 で きる よう に な り ま す 。 

た だ し 、span、width の 各 属 性 が <col> タグ (次 項 参照 ) に 指定 され て いる 場合 は 、 そ ちら 
が 優先 され ます 。 





<table border="1"> 
<colgroup width="300"></colqroup> 
<colqroup span="2" width="200" align="right"></colgroup> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td><td> 受付 終了 </td></tr> 
<tr> <td> 水曜 </td> <td> 胡 礎 クラ ス </td><td> 募集 中 </td></tr> 
<tr> <td> 金曜 </td> <td> 応用 クラ ス </td><td> 今期 休講 </td></tr> 
</table> 








強 列 を サル ー ブ 化 したい - Microsoft Imternet Explorer 


プア イル) 編集) 表示 W) お 気 に 和 9 ツー ル ① へ り プ ⑱ 

O・ の 回 回 の の we 安 pwo 仙 7 の の 

月 曜 _ | 入門 クラ ス | 受付 終了 
水曜 基礎 クラ ス 募集 中 | | 
金曜 応用 クラ ス 今期 休講 
キーーーーーーーーーーーーーーP- キーーーーーー ニ ーー 上 ーー 年 ーーー ニ ーーーーーー 








N 列 を サル ー ナ 化し た い - Netscape 6 


Shttp//www shoeishacom/book/pc/t/taed 呈 | 隔 


] 用 入門 ラス 8 
砂 曜 ”。 ” 隊 礎 2 ラス 隣 信 中 。 | 
“ 殿 曜 。 ~。 。 | 用 2 ラス | 期 休 


っ エーーー--ーーーーーーーーーーー- キーーーーーーーー- 上 キーーーーーー ニ ーー ニー 





4 Netscape で は align 属性 が 無視 され る な ど 完 全 に は 対応 し て いま せん 








に いさ ビ い 「 











1 1 IE5.5 1 ココ NN4 ドド し 守 4 ド に ルコ 
O O O O 〇 O ※ ※ 『 ペ パ 
※ Macintosh 版 Internet Explorer 5 は width 属性 が 無視 され る な ど 、 完 全 に は 対応 し て いま せん 
] 参照 セル 内 の テキ スト の 位置 を 指定 し た い … …p. ら 16 列 に まとめ て 属性 を 設定 し た い ……・・… ドーー p. ら 42 
行 を クル ー プ 化し た い …p.238 











に に ビ い だ [ 
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文 *eeeeeSDan=" グ ルー プ 化 する 列 数 " (デフォルト は 1) 
width=" 列 幅 " (ビク セル 、%、 ゞ *) 
align="left"、"center"、"right" 
valiign="top"、"middle"、"bottom"、"baseline" 






複数 の 縦列 に 対し て 、 ま と め て 属性 を 設定 し た いと き に 使用 し ます 。 

<ColgrouD> タプ の よう に 列 を グル ー プ 化す る 働き は 持ち ませ ん 。 

ここ で 指定 し た span、width の 各 属 性 は <colgroup> タグ (前 項 参照 ) に 指定 し た 場合 より 
も 優先 され ます 。 


<table border="1"> 

<colgrouD> 
<col width="100"> 

</colqroup> 

<colgroup span="3" width="150"> 
<col span="2" align="right"> 
<col algin="center"> 

</colgroup> 
<tr><td> 月 曜 </td><td> 入門 クラ ス </td><td> 上 田 </td><td> 受付 終了 
</td></tr> 
<tr><td> 水曜 </td><td> 基礎 クラ ス </td><td> 左 川 ・ 右近 </td><td> 募集 中 
</td></tr> 
<tr> <td> 金曜 </td><td> 応用 クラ ス </td><td> 下 遠野 </td><td> 執筆 受付 終了 
</td></tr> 

</table> 











列 に まとめ て 属性 を 設定 し た い 


当 列 に まとめ て 届 人 性 を 設定 し た い - Microsoft Internet Explorer 


イル) 皿 集 GE) 表示 め ーー ウー ル ①D へ 2⑪ 


ーー--ー-ー に ーーーーーーーー ーーーーーーー テ - 
入門 クラ ス 上 田 受付 終了 


基礎 クラ ス 左 川 - 右 近 募集 中 


応用 クラ ス 下 遠 野 執筆 受付 終了 
ーーーー ア テー ーーーーーーーー 











人 align 属性 が 無視 され る な ど 完全 に は 対応 し て いま せん 








に いさ ピ い [| 


1 1 IE5.5 1 ゴゴ NN4 MC 守 4 に ルコ 
O 〇 (9 O 9 ※ X 人 へ 


行 を クル ー プ 化し た い 
列 を グル ー プ 化し た い 








列 に まとめ て 剛性 を 設定 し た い 。 243 








フレ ー ム を 作り た い 


<frameset 太 > で </frameset> 





丸 eeeerOWS=" 横 割 の 指定 "(ビク セル 、%、*) 
cols=" 縦 割 の 指定 "(ピク セル 、%、*) 






フレ ー ム 機能 を 使用 する と 、 ひ と つの ブラ ウザ ウィ ンド ウ を いく つか に 区 切っ て 、 そ れ ぞ れ に 
別 の 文書 を 表示 させ る こと が で きま す 。 ど の よう に 分 割 す る か は <frameset> タグ と 
</frameset> タグ に 挟ん で 設定 し ます 。 

通常 の HTML 文書 は 、<head> と <body> か ら 構 成 さ れ ま す が (Dp.20 参照 )、 フ レー ム の 分 
割 を 設定 する 文書 は <head> と <frameset> で 構成 され ます 。 つ まり 、 通 常 <body> と 
</body> タグ が ある べき 部 分 に 、 代 わり に <frameset> と </frameset> タグ を 配置 する こと に 
な り ま す 。<body> タグ は 使用 で きま せん の で 注意 し て くだ さい 。 

roWS 属性 と cols 属性 は 分 割 の し か た を 指定 する 属性 で す 。 

roWS 属性 で は フレ ー ム を 横 に 分 割 し それ ぞ れ の 高 さ を 上 か ら 順 に 、cols 属性 で は フレ ー ム を 
縦 に 分 割 し それ ぞ れ の 幅 を 左 か ら 順 番 に 、「,」 (カン マ ) で 区 切っ て 指定 し ます 。 使用 で きる 単位 
は ピク セル 、9%%、x* (アス タリ スク ) で す 。 

な お 、 さ ら に 分 割 する 場合 に は 、<frameset> と </frameset> タグ を 入れ 子 に し て 指定 し ます 。 

フレ ー ム 機能 を 使用 する 場合 の DTD (p.16 参照 ) は 次 の よう に な り ま す 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.orq/TR/html4/frameset.dtd"> 


テー で ヽ ! 


244 フレーム を 作り た い 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 


"http://www.w3.orq/TR/html4/frameset.dtd"> 
<htm> 





<head> 
<title= フレ ー ム を 作り た い </title> 
</head> 


<frameset cols="20%, 80%"> 
<frameset rows="200, *"> 





<frame src="frame1.html"> 
<frame src="frame2.html"> 
</frameset> 
<frame src="frame3.html"> 
</frameset> 


</html> 





frame1.html 






frame3.html 


frame2.html 


人 る この フレ ー ム で は 、 フ レー ム を 定義 する HTML (上 の サン ブル ソー ス )、frame1.html 一 
frame3.html の 合計 4 つの HTML ファ イル が 必要 で す 


トー で い 








テー で 


「*」 を 使っ た 長 さ の 割合 の 指定 KK スス ミス ミス ミミ ミミ スミ スミス ミド KIXEKIEK は KK は XX は ASKEKKKXX】 


長 さ ( 幅 や 高 さ な ど ) を 指定 する 方 法 に は 、「 ビ クセ ル 」 や 「 パ ー セ ント (%)」 の ほか に 「 ア スタ リス 
ク (*)」 を 利用 する 方 法 が あり ます 。 こ れ ら が 一 度 に 指定 され た 場合 は 、 ま ず 「 ピ クセ ル 」 と 「%」 で 指 
定 され た 分 が 確保 され 、 そ の 残り の 分 が 「*」 の 前 に つけ られ た 数 字 の 割合 で 分 配 さ れ ま す (単に 「*] 
と 指定 され た も の は 「1*」 で ある こと を 示し て いま す )。 た と えば 、60 ピク セル に 対し て 「*,2x,3x」 と 
指定 し た 場合 に は 、60 ピク セル を 分 割 (1+2+3) し て 、 そ れ ぞ れ 10,20.30 ビク セル と いう こと に な り 
天 間 。 

この 方 法 は 、<frameset> の row、col 属性 や 、<colgroup>、<col> の width 属性 (p.240 一 242 参 
照 ) で も 利用 可能 で す 。 


<frameset cols="5096.5096"> 
</frameset> 


同じ 幅 の フレ ー ム を 2 つ 作 成す る 


<frameset rows="100,*,3* リ > 

</frameset> 
横 に 3 分 割 し 、 上 か ら 100 ピ クセ ル 、 残 り の 高 さ の 1/4、3/4 
の フレ ー ム を 作成 する 





<frameset rows="3096.7096"> 
<frameset cols="*,100"> 


</frameset> 
</frameset> 
横 に 2 分 割 し それ ぞ れ 309%、709%% の 高 さ の フレ ー ム を 作成 す 


る 。 さ ら に 上 の フレ ー ム を 縦 に 2 分 割 し 、 そ の うち の 右側 の 
フレ ー ム の 幅 は 100 ピ クセ ル に する 


COTEIKKIILIKKIAIKILKLAEKKKLILAKIKKKKIKKKKKKKKXXAKKKKKKKEKKXKKXXXRRKKKKXAXIRRS】 





1 子 3 1 1 大 -】 1 LC NN4.7 に ルオ 
O O O O O O O 
参 昭 HTML の バー ジョ ン を 指定 する ……………… ーー・ p.16 
と y デ フレ ー ム を 表示 し な い 環境 に 対処 し た い ……-……-| p.266 
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<frame src=" 友 "> 





支 *eees フ ァイル の URL 






フレ ー ム は 、 ウ ィ ン ド ウ ご と に 表示 する HTML ファ イル を 保存 し て お き 、 こ れ を リン ク を 使っ 
て 読み 込む し くみ に な っ て いま す 。<frame src=" 娘 "> で フレ ー ム に 表示 され る ファ イル を 設定 
し ます 。rows を 使っ て 分 割 し た 場合 に は 上 か ら 下 、cols を 使っ て 分 割 し た 場合 に は 左 か ら 右 と 
それ ぞ れ 分 割 し た ウイ ンド ウ に 対応 する よう 、 順 番 に 記述 し て くだ さい 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 


<html> 

<head> 

<meta http-equiv="content-type" content="text/htm charset=shift jis"> 
<titles フレ ー ム に 表示 され る ファ イル を 指定 し た い </title> 

</head> 


<frameset cols="280,*"> 
<frame src="menu.html"> 





<frame src="contents.html"> 
</frameset> 








</htm> 





フレ ー ム に 表示 され る ファ イル を 指定 し た い 


DSY 
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テー で 3 


左 の フレ ー ム に 表示 され る mienu.htfmil 


<body bgcolor="#ff99cc"> 

<D> 

<b> フレ ー ム </b> 

</P> 

<ol> 
<li> フレ ー ム の 作成 </i> 
<li> 表示 され る ファ イル </li> 
<i> 境界 線 の 有無 </i> 
<li> フレ ー ム の サイ ズ を 固定 </l> 
<i> 境界 線 の 幅 を 変更 </i> 
<li> 境界 線 の 色 を 指定 </i> 
<li> 枠 か ら の マー ジン を 指定 </li> 
<lii> スク ロー ル 表 示 の 有無 </li> 
<i> 読み 込む ウィ ンド ウ を 指定 </li> 
<li> フレ ー ム 非 対 応 に 対処 </l> 
<li> イン ライ ン フ レー ム </> 

</ol> 

</body> 














右 の フレ ー ム に 表示 され る <onfents.himl 
<body bgcolor="#990099" text="#ffffff"> 
<h1> フレ ー ム </h1> 


<hr> 





<D> 

フレ ー ム で は 、 ブ ラウ ザウ ィ ン ド ウ を 独立 し た 複数 の ウィ ンド ウ に 区 切り 、 そ れ ぞ れ に コン 
テン ツ を 表示 する こと が で きま す 。 こ れ に よっ て メニ ュー と メイ ン の コン テン ツ を 別々 に 表 
示し 、 メ ニュ ー は その まま で コン テン ツ の み を 変更 する と いう こと も 可能 に な り 、 よ り 効果 
的 な 表現 方 法 が 期待 で きま す 。<br> 

し か し 、 フ レー ム 機 能 に 対応 し て いな い ブ ラウ ザ も ある の で 、 フ レー ム 未 対応 ブラ ウザ へ 向 
けた コン テン ツ (&lt:noframes&gt: &lt:/noframes&gt:) を 設定 する こと も 忘れ な いよ う 
に し まし ょ う 。 

</D> 
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Os の 回 の の ws 支 5mo 人 ちの の 人 回 


フレ ー ム 


フレ ー ム の 作成 
表示 され る ファ イル 
境界 線 の 有無 
フレ ー ム の サイ ズ を 固定 
境界 線 の 幅 を 変更 
境界 線 の 色 を 指定 

枠 か ら の マー ジン を 指定 
スク ロー ル 表示 の 有無 
読み 込む ウィ ンド ウ を 指 


定 
10 フレ ー ム 非 対 応 に 対処 
11. イン ライ ン フ レー ム 


omo つの gm ょ の OS 一 


| パージ が 折 二 され まし た 





の イタ ーネット 














表示 され る ファ イル 
境界 線 の 有無 
ー ム の サイ ズ を 固定 
由 を 変 


ン 


ルー は IA に 
イヤ ライ フレ ー ム 


Iie1eh4 り コ 


フレ ー ム 設定 例 











[ば ! [ [ 王 対 IE6 DD DD N6.2 
O O C O り O O 
リン ク を 設定 し た いい moon p146 
リン ク を 読み 込む ウィ ンド ウ を 指定 し た い ……- pi268 
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frameset へ の 指定 の み HTML4.01 規格 外 隔 


・ 非 表示 を 指定 し た い 
<frame src="" frameborder=" 迄 "> 
<frameset frameborder=" 迄 "> て </frameset> 









文 *esee* フ ァイル の URL 
福 *ewee*1 (表示 、 デ フォ ルト )、0 ( 非 表示 ) 






frameborder 属 性 で フレ ー ム と フレ ー ム を 区 切る 境界 線 の 表示 プ 非 表示 を 指定 し ます 。1 を 指 
定 する と 境界 線 を 表示 し (デフ ォ ル ト )、0 で 境界 線 を 表示 し ませ ん 。 

一 般 的 な ブラ ウザ で は <frameset> タグ と <frame> タプ の どちら に も 指定 で きま す が 、 
HTML4.01 で は <frame> タグ に の み 定 義 さ れ て いる 属性 で す 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 

<html> 

<head> 

<title> 境界 線 の 有無 を 決め る </Hitle> 

</head> 


<frameset cols="280,*"> 
<frame src="menu.html" frameborder="0"> 
<frame src="contents.html" frameborder="0"> 
</frameset> 


</htm> 











※ menu.html と contents.html の ソー ス は p.248 を 参照 し こく だ さい 


トー で い 


250 境界 線 の 表示 ・ 非 表示 を 指定 し た い 


お WE 和 AO ウー ル D へ 2 


ezpmcA0 77 の 由 


表示 され る ファ イル 
境界 線 の 有無 

フレ ー ム の サイ ズ を 固定 
境界 線 の 幅 を 変更 
境界 線 の 色 を 指定 

枠 か ら の マー ジン を 指定 
スク ロー ル 表 示 の 有無 
読み 込む ウィ ンド ウ を 指 


定 
フレ ー ム 非 対 応 に 対処 
イン ライ ン フ レー ム 





IDIe1N4 り = 




















境界 線 を 完全 に 消す に は ROOTKYYCLYKYKKYKLKIIKKYKIKKLKKIEKEKILKLKYRIIKIYIENO 


frameborder 属性 で 境界 線 を 非 表示 (frameborder="0") に し て も 、 サ ンプ ブル の よう に 境界 部 分 は 残 
っ て し まい ます 。 こ の 部 分 を 完全 に 消す に は 、<frameset> タグ に frameborder 属性 を 指定 する ほか に 、 
Internet Explorer が 独自 に 拡張 し た framespacind 属性 、 お よび Netscape Navigator が 独自 に 拡張 し 
た border 属性 を それ ぞ れ 指定 する 必要 が あり ます 。 
































<frameset cols="280,*" frameborder="0" RON 0> 
</frameset> P4 
た だ し 、 こ れ ら の 機能 よ HTML4.01 で は 定義 され て いな い だ け で な く 、 フ レー ム の サイ ズ 変 更 が で き 『 
な く な っ て し まう た め ユ ー ザ ー が 利用 し づら い ペ ー ジ に な る 可能 性 が ある こと に も 注意 し て くだ さい 。 ム 
1 1 二 】 1 二胡 1-】 NN4 ドド し 守 4 ド に に ルコ 
〇 O O O O O O 





参照 境界 線 の 幅 を 指定 し た い …・ 
有 P” 境界 線 の 色 を 指定 し た い …… 
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フレ ー ム の 境界 線 を 固定 し た い 


<frame src=" 太 "noresize> 









文 *esees* フ ァイル の URL 


noresize 属性 は フレ ー ム と フレ ー ム を 区 切る 境界 線 を 固定 し 、 ウ ィ ン ド ウ の サイ ズ を 変更 で き 
な いよ うに し ます 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 

<html> 

<head> 

<title> フレ ー ム の 境界 線 を 固定 し た い </title> 

</head> 


<frameset cols="280,*"> 
<frame src="menu.html" noresize> 
<frame src="contents.html"> 
</frameset> 


</html> 











※ menu.html と contents.html の ソー ス は p.248 を 参照 し て くだ さい 


トー で い 


252 “パフ レー ム の 境界 線 を 固定 し た い 





アイ ル 竹 業 6) 表示 お気 に 入 D⑱ ウー ル D へ ルプ ⑬ 


@・ の 9 恨 人 ぬ ws 支 5moo 人 W テ 7 の 全 - 


フレ ー ム 


フレ ー ム の 作成 
表示 され る ファ イル 
境界 線 の 有無 

フレ ー ム の サイ ズ を 固定 
境界 線 の 幅 を 変更 
境界 線 の 色 を 指定 
枠 か ら の マー ジン を 指定 
スク ロー ル 表 示 の 有無 
読み 込む ウィ ンド ウ を 指 


年 + う に 
フレ ー ム 非 対 応 に 対処 語 
イン ライ ン フ レー ム FocTYPE 宣 言 


フレ ー ム 設定 例 


性 を 指定 する と 、 ポ イン タ は 変化 せ ず 境 界 線 は 移動 で きま せん 





人 通常 は 境界 線 に ポイ ンタ を 合わ せる と 、 ポ イン タ は + 状 に な り 境 界 線 を 移動 する こと が で きま す が 、noresize 属 





El 
KN だ SET 


性 を 指定 する と 、 ポ イン タ は 変化 せ ず 境界 線 は 移動 で きま せん 








人 通常 は 境界 線 に ポイ ンタ を 合わ せる と 、 ポ イン タ は +… 状 に な り 境 界 線 を 移動 する こと が で きま す が 、noresize 属 


PKGT 
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参照 境界 線 の 表示 ・ 非 表示 を 指定 し た い -………-…・……・ p.250 
史 スク ロー ル バ ー の 表示 ・ 非 表示 を 指定 し た い …・…・ p.260 
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<frameset border=" 文 "> で </frameset> 












支 seeeee 境 界 線 の 幅 (ピク セル ) 


境界 線 の 幅 を 変更 する に は 、<frameset> タグ に border 属性 を 指定 し ます 。 
Netscape Navigator で 拡張 され た 属性 で す が 、Internet Explorer で も 利用 で きま す 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 

<html> 

<head> 

<title> 境界 線 の 幅 を 指定 し た い </title> 

</head> 





<frameset cols="280,*" border="40"> 
<frame src="menu.html"> 
<frame src="contents.html"> 
</frameset> 





</html> 
5 
※ Imenu.html と contents.html の ソー ス は p.248 を 参照 し て くだ さい 
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1 際 





カイル 電 要 5) 表示 お 気 に 入 D⑯ ツー 


フレ ー ム 


1、 フ レーム の 作成 

2 表示 され る ファ イル 

3 境界 線 の 有無 

4 フレ ー ム の サイ ズ を 固定 
5 境界 線 の 幅 を 変更 

6 境界 緑 の 色 を 指定 

7 枠 か ら の マー ジン を 指定 
8 スク ロー ル 表 示 の 有無 

9 読み 込む ウィ ンド ウ を 指 


定 
10 フレ ー ム 非 対 応 に 対処 
11. イン ライ ン フ レー ム 




















^ ル ブ 0 ゆ 


@ 避 の 回 人 る の es 支 mo0 較 ケ 7 の つ 日 回 ・ 



































され る フッ イ ル 
ee 
の 内 を 変更 


DOCTYPE 宣 言 

















1 1 1 王 元 】 NN4 NN4.7 に ル 4 
O O O O O O 
※ Macintosh 版 Intemet Explorer 5 は 対応 し て いま せん 
参照 境界 線 の 表示 ・ 非 表示 を 指定 し た い ・…… 
や め ” 境界 線 の 色 を 指定 し た い 
境界 線 の 幅 を 指定 し た い 


PPKSY 





人 ェ 
HTML4.01 規格 外 了 同 







境界 線 の 色 を 指定 し た い 


<frameset bordercolor=" 半 "> て </frameset> 
<frame src=" 文 " bordercolor=" 巡 "> 





友 wewe フ ァイル の URL 
を weees 色 指定 値 (#rrggbb) また は 色 名 (colorname) 






境界 線 の 色 を 設定 する に は 、bordercolor 属性 を 使用 し ます 。 こ れ は <frameset> タグ 、 
<frame> タグ どちら に も 指定 で きま す 。 ' 
た だ し 、HTML4.01 で は 定義 され て いな い 属 性 で す 。 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 

<html> 

<head> 

<title> 境界 線 の 色 を 指定 し た い </title> 

</head> 


<frameset cols="280,*" border="20" bordercolor="yellow"> 
<frame src="menu.html"> 
<frame src="contents.html"> 

</frameset> 


</html> 








※ Imenu.html と contents.html の ソー ス は p.248 を 参照 し こく だ さい 
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アル 野生 表示 ⑰ お気 に AO⑳ ウー ル D へ M プ G ゆ 
の 還 人 の め の ews 表 2m20 寺 ケ の G 8・ あ 回 ・ 
フレ ー ム 


フレ ー ム の 作成 
表示 され る ファ イル 
境界 線 の 有無 

フレ ー ム の サイ ズ を 固定 
境界 線 の 幅 を 変更 
境界 線 の 色 を 指定 

枠 か ら の マー ジン を 指定 
スク ロー ル 表 示 の 有無 
60 


10 フレ ー ム 非 対 応 に 対処 
11。 イン ライ ン フ レー ム 


om の omo 一 








| バージ が 表地 さ れ ま し た 














1 フレ ー ム の 作成 
2 表示 され る ファ イル 
3 境界 線 の 有無 








NN4.7 に ルス 


O O 











1 IE5 1 主 た 】 1 コガ 
Oo Oo Oo Oo 
夫 線 の 表示 ・ 非 表示 を 指定 し た い …………………・p.250 
P 境界 線 の 幅 を 指定 し た い rp.254 





境界 線 の 色 を 指定 し た い 












7 FRAME 前 間 
フレ ー ム 枠 か ら の マー ジン を 指定 し た い 


<frame src=" 太 " marqinwidth=" 交 " marginheight=" 全 "> 





文 *eees フ ァイル の URL 
※ ゃ eees 左 右 の マー ジン (ピクセル) 
全 ゃ eeee 上下 の マー ジン (ビク セル ) 


フレ ー ム 枠 (境界 線 ) と コン テン ツ と の 奈 白 (マー ジン ) を 指定 し ます 。 ど ちら も ピク セル で 
指定 し ます 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 

<html> 

<head> 

<title> フレ ー ム 枠 か ら の マー ジン を 指定 し た い </title> 

</head> 


<frameset cols="280,*"> 
<frame src="menu.html" marginwidth="30" marginheight="20"> 
<frame src="contents.htmU" marginwidth="50" marginheight="50"> 
</frameset> 





</htm> 








※ Imenu.html と contents.html の ソー ス は p.248 を 参照 し て くだ さい 
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アイ 電 表 お % に AD@ ウー ル D へ 0⑲ 
の 由 引 の お の we 害 5mOo 全 の の 日 回 ・ 


フレ ー ム 


1. フレ ー ム の 作成 
2. 表示 され る ファ イル 
3. 境界 線 の 有無 

4 フレ ー ム の サイ ズ を 


9 家 株 の 幅 を 変更 

6. 境界 線 の 色 を 指定 

7. 枠 か ら の マー ジン を 
指定 

8 スク ロー ル 表 示 の 
有無 


9 読み 込む ウィ ンド ウ 
を 指定 

10 フレ ー ム 非 対 応 に 
対処 


11。 イン ライ ン フ レー ム 


< > 
8) ペー ワ が 表示 され まし た @ イン ター ネッ ト 














上 
8 スク ロー ル 表 示 の 有 


9 読み 込む ウィ ンド ウ を 


10 人 
11. イン ライ ン フ レー ム 
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スク ロー ル バ ー の 表示 ・ 非 表示 を 指定 し た い 


WW_A_WW 


<frame src=" 廊 "scrolling=" 近 "> 





文 wees フ ァイル の URL 
壮 weeeeeautO、VeS、n0 






フレ ー ム 内 で の スク ロー ル バ ー の 表示 プ 非 表示 を 設定 し ます 。 
auto コン テン ツ に 応じ て スク ロー ル バ ー か が 必要 か どう か を ブラ ウザ 側が 判断 し 、 必 要 な 
と き に は 自動 的 に スク ロー ル バ ー が 表示 され る (デフ ォ ル ト ) 
yes スク ロー ル バ ー を 表示 し 、 常 に スク ロー ル 可 能 
no スク ロー ル バ ー は 非 表 示 、 常 に スク ロー ル 不 可 
た だ し 、Netscape 6 で は yes を 指定 し て も auto と 同様 に 解釈 され る よう で す 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/frameset.dtd"> 

<html> 

<head> 

<title> スク ロー ル バ ー の 表示 非 表 示 を 設定 し た い </title> 

</head> 





<frameset cols="280,*"> 
<frame src="menu.html" scrolling="yes"> 
<frame src="contents.html" scrolling="no"> 
</frameset> 


</html> 





トー で い 





※ menu.html と contents.html の ソー ス は p.248 を 参照 し こく だ さい 
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イル 雪 (表示 お 気に入り ⑯ ウー ル CD へ ルプ 0⑳ 
@ ゃ の 回 人 の の es 支 omco す ケ の の は -<。 還 ・ 
フレ ー ム 
フレ ー ム の 作成 
表示 され る ファ イル 


1 
も 

3 境界 線 の 有無 

4 フレ ー ム の サイ ズ を 固 





定 

境界 線 の 幅 を 変更 
境界 線 の 色 を 指定 
2 
8 スク ロー ル 表 示 の 有無 
9 読み 込む ウィ ンド ウ を 

指定 

10 フレ ー ム 非 対 応 に 対処 
イン ライ ン フ レー ム 


っ om 


フレ ー ム の 作成 
表示 され る ファ イル 
境界 線 の 有無 
シーム の サイ ズ ま を 計 


境界 線 の 幅 を 変更 
境界 線 の 色 を 指定 
4 ジン を 指 





全 左 の フレ ー ム は 常に スク ロー ル バ ー が 表示 され 、 右 の フレ ー ム は 
常に スク ロー ル バ ー が 表示 され ませ ん 











和 
2 
3 
計 
5 

6 

7 枠 
8 ス 
9 読 


ス 2 ロ 2 が 
ム Netscape 6 で は 、yes を 指定 し て も auto の 解釈 が な され る た め 、 の 和 ヴィン ドウ を 人 | 
左 の フレ ー ム は 必要 が ある と き に スク ロー ル バ ー が 表示 され ます 。 Faoneoesos 
右 の フレ ー ム は 常に スク ロー ル バ ー が 表示 され ませ ん 
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<frame src=" 友 "name=""> 
<a href=" 金 " tarqet=" 交 "> に の </a> 










文 *eees フ ァイル の URL 
。 we フレ ー ム 名 また は _blank、_self、_parent、_top 
を ……… 読 み 込む フ ァイル の URL 






通常 リン ク 先 の 内 容 は リン ク 元 と 同じ ウィ ンド ウ や フレ ー ム 内 に 読み 込ま れ ま す が 、 読 み 込む 
フレ ー ム を target 属性 で 指定 し て お け ば 、 別 の フレ ー ム に 読み 込ま せる こと も で きま す 。 
この た め に は 、 ま ず 各 フレ ー ム に 名 前 を つけ て お く 必 要 が あり ます 。<frame> タグ の name 
属性 で 、 フ レー ム に 名 前 を 設定 し て くだ さい 。 そ し て 、 こ の 名 前 を リン ク の target 属性 で 指定 す 
れ ば 、 そ の フレ ー ム に 内 容 が 読み 込ま れ ま す 。 
また 、_blank、_self、_parent、_top と いう 規定 の 値 で 読み 込む せ フ レー ム を 決め る 方 法 も あ 
り ま す 。 そ の 場合 の 読み 込ま れ 方 は 次 の と お り で す 。 
_blank 名 前 が 付け られ て いな い 新 し い フ レー ム に 内 容 を 表示 
_self リン ク 元 と 同じ フレ ー ム に 内 容 を 表示 
_parent フレ ー ム を 一 段 だ け 解 除 し 、 親 フレ ー ム (<frameset> で 各 フ レー ム を 設定 
し て いる フレ ー ム ) に 表示 。 親 フ レー ム が な い 場 合 に は 「_self」 と 同じ 結果 
_top すでに ある フレ ー ム を すべ て 解除 し て 、 ウ イン ドウ いっ ぱい に 表示 。 親 フ 
レー ム が な い 場 合 に は 「_self] と 同じ 結果 
target 属性 の 値 と 読み 込む せ フ レー ム の 関係 (の 一 例 ) は 以下 の 通り で す 。 


テー で 





人 る 上 記 の よう な 単純 な フレ ー ム で は _parent と _top は 同じ 結 
果 と な り ま す が 、 フレ ー ム を 入れ 子 (frameset の 定義 ファ イル 
を フレ ー ム に 読み 込む ) に し た 場合 は 結果 が 異な っ て きま す 
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<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://Www.w3.org/TR/html4/frameset.dtd"> 


<html> 

<head> 

<title> リン ク を 読み 込む ウィ ンド ウ を 指定 し た い </ せ itle> 
</head> 


<frameset cols="280,*"> 
<frame src="menu.html' name="menu"> 
<frame src="contents.html" name="contents"> 
</frameset> 


</html> 














左 の フレ ー ム に 表示 され る mienu.hfml 
<html> 
<head> 
<title> フレ ー ム ・ メ ニュ ー </tHitle> 
</head> 


<body bgcolor="#cccc66"> 





<D> 

<b> フレ ー ム </b> 

</P> 

<0l> 
<li><a href="frame1.html" target="contents"> フレ ー ム の 作成 </a></li> 
<li><a href="frame2.html" target="contents"> 表示 され る ファ イル </a></> 
<li><a href="frame3.html" target="contents"> 境界 線 の 有無 </a></li> 
<li><a href="frame4.html" target="contents"> フレ ー ム の サイ ズ な 回 定 </a></H> 
<li><a href="frame5.html" target="contents"> 境界 線 の 幅 を 変更 </a></li> 
<li><a href="frame6.html" target="contents"> 境界 線 の 色 を 指定 </a></li> 
<li><a href="frame7.html" target="contents" > 枠 か ら の マー ジン を 指定 </a></li> 
<li><a href="frame8.html" target="contents"> スク ロー ル 表 示 の 有無 </a></i> 
<li><a href="frame9.html" target= "contents"> 読み込む ウィ ンド ウ を 指定 </a></li> 





リン ク を 読み込む ウィ ンド ウ を 指定 し た い 


CSY 
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<li><a href="frame10.html" target= "contents"> フレ ー ム 非 対 応 に 対処 </a></1> 
<li><a href="frame11.html" target="contents"> イン ライ ン フ レー ム </a></1> 
</ol> 
</bodV> 


</html> 














※ contents.html の ソー ス は p.248 を 参照 。frame9.html の ソー ス は 省略 し ます 
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< く base> タグ に よる 読み 込み 先 の 指定 に ルオ オミ ネオ オメ ミミ ミミ ミト メ オミ メ ドド MMMIEKIEERKEEKXKESKXXM】 


<base> タグ の target 属 性 を 使用 し て 読み 込み 先 を 指定 し て お け ば 、 各 a 要 素 の target 属性 を 省略 す 
る こと が で きま す 。<base> タプ に は その ファ イル 自身 の 絶対 URL を 記述 し て くだ さい (Dp.22 参照 )。 


<htm> 

<head> 

<title> フレ ー ム ・ メ ニュ ー </Htle> 

<base hre 伝 "http://www.ank.co.jp/xxx/menu.html' tarqet="contents"> 

</head> 

<body> 

<D テ > 

<b> フレ ー ム </b> 

</D> 

<0> 
<li><a href="frame09_3.html"> フ レー ム の 作成 </a></li> 
<li><a href="frame09_3.html"> 表 示さ れる ファ イル </a></li> 
<li><a href="frame09_3.html'> 境界 線 の 有無 </a></li> 





と 4 

の 

スコ に た も ええ ええ ええ ええ ええ ええ ええ ええ オネエ ミミ ミネ ミネ ミ エメ ミミ ミミ ミミ スス メス メス SRIREIRRSIRISS ま 】 1 

PCD ロ ム 
1 ズ 】 1 王寺) 1 コガ ドド 1 ドド 和 4 が に ルイ 
O O O 9 O O O 

参照 基準 と な る URL を 指定 し た い ………… ド ーー p.G8G フレ ー ム に 表示 され る ファ イル を 指定 し た い ……… p.247 
示 ” 新しい ウィ ンド ウ に リン ク 先 を 表示 し た い -………・ p.156 





10 
フレ ー ム を 表示 し な い 環境 に 対処 し た い 


<noframes> ぐ </noframes> 







フレ ー ム に 対応 し て いな い ブ ラウ ザ を 使用 し て いる 場合 や 、 ユ ー ザ ー が フレ ー ム を 表示 し な い 
設定 に し て いる 場合 な ど に 、 代 わり に 表示 する 内 容 を 設定 し ます 。<noframes> 一 
</noframes> は 、<frameset> と </frameset> タグ の 中 の 最後 に お いて くだ さい 。 
<noframes> と </noframes> タグ の 間 に は 、 単 純 な 代替 テキ スト だ け で な く 、HTML 文書 を 
記述 する こと が で きま す (た だ し 、<body> タグ を 書く こと は で きま せん ) 。 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 


"http://www.w3.org/TR/html4/frameset.dtd"> 


<html> 

<head> 

<title> フレ ー ム を 表示 し な い 環 境 に 対処 し た い </title> 
</head> 


<frameset cols="280,*"> 
<frame src="menu.html"> 
<frame src="contents.html"> 
<noframes> 
<D テ > 
この ペー ジ で は フレ ー ム を 使用 し て いま す 。<br> 
フレ ー ム 未 対応 ブラ ウザ を お 使い の か た は <a href="noframes-index.html"> こち ら 


へ </a> どう ぞ 。 
フ < 
レ 7p> 
1] </noframes> 
な </frameset> 
</html> 











※ menu.html と contents.html の ソー ス は p.248 を 参照 し こく だ さい 
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フレ ー ム を 表示 し な い 環境 に 対処 し た い 計 二 ミー っ = 是 
記 


邊 3 列 カ 。 プ リン ト メー ル 
要 表 半 唐 () pyww shoeishs com/book/pc/ パ /tagdio 小 -10rame/frame10.html 稚 動 


この ベ ページ で は フレ ー ム を 使用 し て いま す 。 
フレ ー ム 未 対応 ブラ ウザ を お 使い の か た は こち ら へ どう ぞ 。 


人 フレー ム 表 示し な い ブ ラウ ザ で は 、<noframe> タグ に 挟ま れ た 部 分 が 表示 され ます ( 図 は Macintosh 版 Internet 
Explorer 5 で フレ ー ム を 非 表 示 に 設定 し た も の ) 








トー で い 


フレ ー ム を 作り た じ NLEESh2eeeeoseescssssss p.244 
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<iframe src=" 太 " 近 > て </iframe> 





太 ws ファ イル の URL 
wmew* 設 定 し た い 属 性 





<iframe> タグ を 使用 する と 、 ウ ィ ン ド ウ を 分 割 する 形式 の フレ ー ム で は な く 、 ウ ィ ン ド ウ 内 に 
挿入 する 形式 の イン ライ ン フ レー ム を 作成 で きま す 。 こ れ に より 、HTMIL 文書 内 に ほか の HTML 
文書 を 埋め こむ こと が 可能 に な り ま す 。 

この タグ は <body> タグ 内 で 使用 し 、 フ レー ム 内 に 表示 され る 内 容 は src 属性 で 指定 し ます 。 
name 属性 で フレ ー ム に 名 前 を つけ 、 こ れ を target 属 性 で 参照 すれ ば 、 サ ンプ ル の よう に リン ク 
を 使っ て 複数 の ファ イル を 読み 込む こと が で きま す 。 

また 、 フ レー ム が 表示 され る 位置 や 大 き さ な ど を 指定 する こと も で きま す 。 そ の 場合 に は 以下 
の よう が な 属性 を と り ま す 。 

name=" フ レー ム 名 " 

width=" フ レー ム の 横幅 " (ピク セル また は %) 

heiqght=" フ レー ム の 高 さ " (ピク セル また は %) 

marginwidth=" フ レー ム 内 の 左右 の マー ジン " (ビク セル ) 

marginheight=" フ レー ム 内 の 上 下 の マ ー ジ ン " (ピクセル) 

scrolling="auto"、"yes"、"no" (スク ロー ル の 指定 auto: 必 要 に 応じ て 一 デフ ォ ル 
ト 、yes: 可 能 、no: 不 可 ) 

frameborder="0"、"1" (フレ ー ム 枠 の 表示 0: 非 表 示 、1: 表 示 一 デフ ォ ルト ) 

align= "left"、"center"、"right" (テキ スト の 回 り 込み ) 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN" 


フ 
「 "http://www.w3.org/TR/html4/loose.dtd"> 
ム <html> 

<head> 

<title> イン ライ ン フ レー ム を つく り た い </Htle> 

</head> 
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<body bgcolor="#ff9966"> 


<P> 

<font size="5"> イ ン ラ イン フレ ー ム を つく り た い </font> 
</P> 

&ltziframe src="ur'  &g も 一 &lt/iframe&gt 

SD テ > 


&ltirame&gt タ グ を …… (中 略 ) …… また 、 表 示さ れる 位置 や 大 き さ な ど を 指定 する こと 
も で きま す 。<a href="attribute.html" target="sample"> この よう な 属性 ( 文 ) 
</a> が 用 意 さ れ て いま す 。 
</P> 
<D テ > 
<iframe src="i-sample.html" name="sample" width="500" height="200"> 
この ペー ジ で は イン ライ ン フ レー ム を 使用 し て いま す 。<br> 
イン ライ ン フ レー ム に 未 対応 の ブラ ウザ を お 使い の か た は 
<a href="noframes-index.htmU"> こち ら へ </a> どう ぞ 。 
</iframe> 
</D> 
</bodV> 


</html> 








イン ライ ン フ レー ム に 表示 され る isqmiple.html 


<html> 

<head> 

<title= イン ライ ン フ レー ム サ ン ブル </title> 

</head> 

<body bgcolor="#996600" text="#TfFffff"> 

<P align="center"> イ ン ラ インフ レー ム サ ン ブル </P> 





<P> 

幅 500 ピク セル 、 高 さ 200 ピク セル の イン ライ ン フ レー ム を 作成 し た 例 。&It:object&gt: タ 
グ で オブ ジェ クト を 埋め 込む 方 法 に 似 て いま す 。 

</P> 

</bodV> 

</html> 


トー で いい 
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イン ライ ン フ レー ム に 表示 され る qttribute.html 
<html> 
<head> 
<title> イン ライ ン フ レー ム の 属性 </Htle> 
</head> 
<body bgcolor="#fffcc"> 
<D> 
文 に 指定 可能 な 属性 
</Dp> 
<D> 
name=" フ レー ム 名 "<br> 


frameborder="0"、"1" (フレ ー ム の 枠 の 表示 ) 
</D> 

</body> 

</htm> 
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座 に 指定 可能 な 司 性 
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アア fA 尊 要 表 志 ⑩ お気 に 入 D⑯ ウー ル CD へ ルプ 0D 
GO 販 引 の の emo の zo の 

イン ライ ン フ レー ム を つく り た い 

<jrame src="ur" 護 >ー く /ifreme> 

| fama> タ グ を 使用 する と 、 ウィ ンド ウ 内 に 挿入 する 形式 の イン ライ ン フ レー ム を 作成 で きま す . これ に 
より ーー 


この タグ は <body> タ グ 内 て で 使用 し 、 フ レーム 内 に 表示 され る 内 は src 司 性 で 括 定 し ます . また . 表示 
ミ れ る 和香 や きど も 提 坪 する こと も て きま す 。 ーー 計 (大 が 用 意 さ れ て いま す - 









9 四 ・ 









イン ライ ソル ー ム を っ <⑨ た い 


frame sro= ui 衣 >ー</iframa> 


<frama> タ グ を 使用 する と 、 ウィ ンド ウ 内 に 挿入 す - 
HTM ドキュメント 内 に ドキ ュ メ ント を : 
この タグ ( で 使用 し 、 フレ oh で 指定 し ます 、 また 、 表示 され る 位 
\ ま す . 


ム 名 " 
ー ム の 機 帳 ・ ビク セル また は % 
ピラ レー ーー ル ま た は 9 。 
内 の : の ね の マ 
















イン ライ ン フ レー ム を つく り た い 
*Mrame gc=TuT 大 >ー</iframe> 


< 親 ame> タ グ を 使用 する と 、 ウ ィ ン ド ウ 内 に 振 入 する 形式 の イン ライ ン フ レー ム を 作成 で きま す 。 こ れ に より 、HTHL ド 
キュ メン ト 内 に 他 の HTHIL ドキ ュ メ ント を 埋め こむ こと が 可能 に な り ま す 、 

この タグ は <body> タグ 内 で 使用 し 、 フ レー ム 内 に 表示 され る 内 容 は rc 馬 性 で 指定 し ます 、 ま た 、 表 示さ れる 位置 や 大 
き さ な ど を 指定 する こと も で きま す 、 こ の よう な 馬 仁 大) が 用 意 さ れ て いま す 。 













に の ペー ジ で は イン ライ ン フ レー ム を 使用 し て いま す 。 
ン ラ イン フレ ー ム に 未 対 応 の プラ ウザ を お 使い の か た は こち ろ ら ー- ど う ぞ 。 


ムイ ン ラ イン フレ ー ム を 表示 し な い ブ ラウ ザ で は 、<iframe> タグ に 挟ま れ た 部 分 が 表示 され ます ( 図 は Macintosh 
版 Intemet Explorer 5 で フレ ー ム を 非 表示 に し た も の ) 
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HTML 文書 の 中 に スタ イル シー ト (p.317 参照 ) を 記述 する 場合 に 使用 し ます 。 

<head> タグ と </head> タグ の 間 に 記 述 し て くだ さい 。 そ の 際 、 ス タイ ル シ ー ト に 対応 し て 
いな い ブ ラウ ザ が スタ イル の 設定 個所 を 表示 し て し まう の を 防ぐ た め 、 設 定 個所 全体 を <!-- と --> 
で コメ ント アウ ト し て お く と よい で し ょ よう 。 

この 形式 で 設定 し た スタ イル は 同じ HTMIL 文書 内 で の み 有 効 に な る た め 、 ペ ー ジ ご と に スタ イ 
ル を 設定 し た い 場合 な ど に 便利 な 方 法 で す 。 

別に 保存 し た スタ イル ファ イル を 読み 込ん で スタ イル シー ト を 利用 する 場合 に は <link> タグ 
(p.34 参照 ) を 使用 し ます 。 

スタ イル シー ト に つい て 詳し く は 本 書 姉妹 書 「 ス タイ ル シ ー ト 辞典 第 3 版 ] を 参照 し て くだ さい 。 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 

<head> 

<title> スタ イル シー ト を 使い た い </ せ ttle> 

<style type="text/css"> 


IE= 


h1 { color:white: 
font-style:italic: 
backgqround-color:#ff3366} 

ーー テ 

</style> 

</head> 

<bodV> 

<h1> ス タイ ル シ ー ト </h1> 

<h2> スタ イル シー ト と は </h2> 


<D> 


た ム 
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web ペー ジ を 記述 する html は 、 文 書 の 論理 的 な 構造 を …… 
</p> 

</bodV> 

</htm> 








等 スタ イル シー ト を 使い た い - Microsoft Internet Explorer 
プア イル 編集 (D) 表示 お 気 に 入 DO ウー ル ① ヘル プ ⑪ 


@ 京 ・⑨ 図 還 人 人 の 下 丈 5wo 発ち テ の @ 代 ・。 


スタ イル シー ト と は 


Web ペ ー ジ を 記述 する HTML は 、 文書 の 論理 的 な 構造 を 





インタネット 





人 る スタ イル シー ト が <h1> タグ に 適用 され ます 











慌 スタ イル シー ト を 使い た い - Netscape 6 
。 アイ ル (E) 編集 GE) 表示 び ) 検索 G) ジャ ンプ ⑬⑯ ブッ クマ ー の が B) が ① AU プ ⑪ 


に づ | ド 「tp//Www shoeishacom/book/pc/t/t き コ K 


ズ スタ プレ シー ム 


スタ イル シー ト と は 
Web ペ ー ジ を 記述 する HTML は 、 文書 の 論理 的 な 構造 を …… 





(⑫273 秒 
人 る スタ イル シー ト が <h1> タグ に 適用 され ます 





1】 3 1 主 大 】 1 コガ NN4 NN4.7 に ルオ 
O O O O 


O O 〇 





参照 文書 同士 の 関係 を 示し た い 
人 D” 特定 の 幼 囲 を 設定 し た い 


圭 S③ パ 





p.34 スタ イル シー トー ドー ドド p.317 








4 に (ヨリ / し まり ヨン に コリ: ヨリ 癌 | 


<SCriDpt 文 > や </script> 





文 *eeeeetype=" ス クリ プ ト 言 語 の MIME タイ プ " 
language=" ス クリ プ ト 言 語 名 " 
src=" ス クリ プ ト フ ァイル 名 "(URL) 





HTML 文書 の 中 に スク リプ ト を 組み 込む 場合 に 使用 し ます 。 

language 属性 は 従来 か ら 使わ れ て いる 属性 で 、 使 用 する スク リプ ト 言 語 を 指定 し ます が 、 
HTML4.01 で は 推奨 し な い 属 性 と な っ て いま す 。 代 わっ て type 属性 が 定義 され (必須 )、 ス クリ 
プ ト 言 語 の MIME タイ プ (text/javascript、text/Vbscript な ど ) を 指定 する 決ま り に な っ て い 
ます 。 

スク リプ ト を HTML 文書 中 に 直接 記述 する 場合 に は 、 ス クリ プ ト に 対応 し て いな い ブ ラウ ザ が 
スク リプ ブ ト 内 容 を 表示 し て し まう の を 防ぐ た め 、 設 定 個所 全体 を <!-- と //--> で コメ ント アウ ト し 
て お く と よい で し ょ よう 。 

また 、 別 に 保存 し た スク リプ ト フ ァイル を 読み 込ん で 利用 する 場合 に は 、src 属性 で スク リプ ト 
ファ イル の URL を 指定 し 、 ス クリ プ ト を 読み 込み た いと ころ に 記述 し ます (p.329 参照 )。 





<bodV> 

<Script type= "text/javascript"> 

<!-- 
document.write("<h1>Hello</h1>"): 
// --> 

</script> 

JavaScript を 使っ た サン プル ペー ジ で す 。 
</body> 














当 スカ リブ ト を 使い たい - Microsoft Internet Explorer 


アイ ル (E) 編集 ) 表示 W) お 気 に 入 D⑯ ツー- ル D へ 0⑪ 


②-@ 回 回 の の wa 支 Bmoo きのみ つ | 
Hello 


JavaScrpt を 使っ た サン プル ペー ジ で す 。 








| スカ リブ ト を 使い た () - Netscane 5 
。 アイ ル CF) 編集 E) 表示 () 検索 G⑤) ジャ ン ブ ⑬) ブッ マー の (⑧) 5①D ヘル プ ⑪ 
9.G 6 








1 1 1 王 誠 ) 1 NN4 NN4.7 N6.2 そ 
O O O O O O O 「 り ) 
他 
参照 初期 情報 を 指定 し た い … ド ーーー 本 BB JaWaSCTDt に esteereteesssesseesssrsseaniesrd p.326 
博 デス クリ ブ ト が 実行 され な い 環境 に 対処 し た い …・… p.276 





3 0 き 電 仙 ら 還 
スク リプ ト が 実行 され な い 環 境 に 対処 し た い 


<nOScript> </noscript> 






スク リプ ト に 対応 し て いな い ブ ラウ ザ を 使用 し て いる 場合 や 、 ユ ー ザ ー が スク リブ ト を 実行 し 
な い 設 定 に し て いる 場合 な ど に 、 代 わり に 表示 する 内 容 を 設定 し ます 。 こ の <noscript> と 
</noscript> タグ は 、<body> と </body> タグ の 間 に お いて くだ さい 。 


<html> 

<head> 

<title> スク リプ ト が 実行 され な い 場 合 に 対処 し た い </ せ itle> 

</head> 

<bodV> 

<Script type= "text/javascript"> 

<!-- 

document.write("<h1>hello</h1>"): 

/ー 

</script> 

<noScript> 
<D> 
この ペー ジ で は JavaScript を 使用 し て いま す 。<br> 
JavaScript 未 対応 ブラ ウザ を お 使い の か た は 
<a href="noscript-index.html"> こち ら へ </a> どう ぞ 。 
</D> 

</noscript> 

</body> 

</html> 











276 スク リブ ト が 実行 され な い 環境 に 対処 し た い 


当 スク リブ ト が 実行 され な い 青 境 に 対 如 し た い 
プア イル (FE) 編集 E) 表示 び ) お 気に入り @⑱ 


- MMicrosoft jnternet Explorer 


ウー ル ①。 AA ルプ ゆい 


@ ま の 回 回 @ の we 支 spmoo 人 @p の の 





| 圭 スウ リブ ト が 実行 され な い 環境 に 対 但し た い - Microsoft mternet Explorer 周回 図 
アイル (F) 編集 EC) 表示 W) お 気 に 入 D(⑳ ツー ル ① ヘル プ ⑪ 


@*・ の 回 国人 の の we 実 pmA0 侍 ケ の の 


この ペー ジ で は JavaScript を 使用 し て いま す 。 
JavaScript 未 対応 ブラ ウザ を お 使い の か た は こち ら へ どう ぞ 。 








人 スク リブ ト が 実行 され な い ブ ラウ ザ の 場合 (Intemet Explorer で スク リブ ト を 無効 に 設定 ) 





に た ム 、 


スク リプ ト を 使い た いい mmo p274 


aa 7 


に だ ム 、 
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HTML4.01 規格 外 


WW ん 


<bgsound src=" 文 "loop=""> 





支 ees サ ウン ド フ ァイル 名 
※ ゃ ees 回 数 また は 、0、-1 


効果 音 や BGM な どの サウ ンド デー タ を 、 ペ ー ジ を 開い た と き に 鳴ら す よ う Internet 
Explorer が 独自 に 拡張 し た タグ で す 。<head> タグ と </head> タグ の 間 に 記 述 し ます 。 

Src 属性 で は サウ ンド ファ イル の URL を 指定 し ます 。 対応 する ファ イル 形式 は 、WAV (.wav) 
形式 、AU (.au) 形式 、MIDI (.mid) 形式 、AIFF (.aif) 形式 で す 。 

再生 回 数 は loop 属性 で 指定 し ます 。0 を 指定 する と 1 回 、-1 を 指定 する と ペー ジ が 開か れ て い 
る 限り BGM を 鳴ら し つづ ける よう に な り ま す 。 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 


<html> 

<head> 

<titlezBGM を 鳴ら し た い </ttle> 

<bqsound src= "sound/test.wav" loop="-1"> 
</head> 

<body> 


</bodV> 
</html> 











ンコ シル アピア 4 スコ て る 品 に 1 し トス スエ メメ メス メメ ミミ ミミ メ メオ ミミ ミミ ミミ トメ メメ メメ ミミ ミミ ミミ ミミ ミス ミミ ミス 】 


再生 が 終わ っ た サウ ンド デー タ を 再び 鳴ら し た いと き は 、 ブ ラウ ザ の [表示 ] メニ ュー か ら 、[ 最 新 の 
情報 に 更新 ] を 選ん で クリ ッ ク し て くだ さい 。 


POORKKIILRKIKLLRRESKSKX】 TLILKKILKIKKKKKSKKKKEKKIRKEKKAYRRRRKKRKKRRKREKRRNI 


セリ リア ルル 点 生 (ELE う に 3 の コ 51 KITIMKEREIMKISKIKKIYKKYERERIX】 オス スネ ミミ ミミ まま 】 


<bgsound> タグ は Intermet Explorer が 独自 に 拡張 し た タグ の た め 、 ほ か の ブラ ウザ で は 無視 され て し ま 
いま す 。 な る べく 多く の 環境 で BGM を 鳴ら す た め に は <embed> タグ (p.280 参照 ) を 利用 する な ど 、 別 
の 方 法 を 使っ た ほう が よい で し ょ う 。<embed> タグ を 使う 場合 は た と えば 以下 の よう な 指定 に な り ま す 。 


<embed src="xxxx.mid' repeat="false" autostart="true" width="150" height="20"> 


src 属性 で サウ ンド ファ イル 名 を 指定 し ます 。repeat は 繰り 返し 再生 する か どう か 、autostart は ペー 
ジ を 開い た と き に 自動 的 に 再生 する か どう か を 設定 する 属性 で す 。 ど ちら も true も し く は false を 指定 し 
ます 。width、height 属性 は 、 画 面 に 表示 され る サウ ンド 再生 用 の パネ ル の 大 き さ を 、 ピ クセ ル で 設定 し 
ます 。 

た だ し 、 現 在 で は <object> (p.281 参照 ) を 用 いる 方 向 で 標準 化 の 動き が 進ん で いま す 。 


HUKILIIRIRERLAAINRIALLKXYLALLALAAKMRIINRRKRXKXA LOOKKKIKXRRRRKRRRI 























プラ グイ ン を 利用 し た い ………… パ ドド ドド p.280 
さま ざま な 形式 の デー タ を 扱い た い ……・……・…ー p.281 








の 
他 
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HTML4.01 規格 外 開 


<embed src="" width=" 六 " height=""> 


<noembed> </noembed> 





*eees プ ラグ イン デー タ の URL 
禅 we プラ グイ ン 領 域 の 幅 (ビク セル ) 
プラ グイ ン 領 域 の 高 さ (ビク セル ) 





プラ グイ ン デ ー タ を HTML 文書 に 貼り 込め る よう に 、 一 部 の ブラ ウザ で 拡張 され た タグ で す 。 
対応 する ブラ ウザ で は これ に よっ て 、 外 部 アプ リケーション (ヘル パー アプ リケーション ) を 起 
動 上 せる こと な く サ ウン ド や ムー ビー デー タ を 扱え る よう に な り ま し た 。 

SrC 属性 で プラ グイ ン デ ー タ を 指定 し ます 。width、height 属性 は プラ グイ ン の 操作 画面 の 大 
き さ を 指定 する も の で す 。 そ の 他 、 使 用 する プラ グイ ン デ ー タ の 種類 に 応じ て さま ざま な 属性 が 
利用 可能 で す が (p.279 参照 )、 詳 細 は 本 書 で は 省略 し ます 。 

<noembed> タグ と </noembed> タグ の 間 に は 、 プ ラグ イン が 利用 で き な い 場合 に 代わ り に 
表示 させ た い 内 容 を 記述 し ます 。 

HTML4.01 で は この <embed> タグ に 代わ る 要素 と し て <object> タグ (次 項 参照 ) が 定義 
され て いま す が 、<object> タグ を サポ ー ト する ブラ ウザ が まだ 少な いた め 、<embed> タグ の 
ほう が 広く 利用 され て いま す 。 





<D テ > 

<embed src="test.swf" width="200%" height="200%"> 

<noembed> 
この ペー ジ を 見 る た め に は 、 
<a href="http://www.macromedia.com/jp/ ">Shockwave Fash プラ グイ ン 
</a> が 必要 で す 。 

</noembed> 

</P> 
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※ 一 部 の 属性 は 対応 な し 


さま ざま な 形式 の デー タ を 扱い た い ………………… p281 





<object 娘 > て </object> 





ww…… デ ー タ タイ プ に 応じ た 各種 属性 





<object> タグ は 、 画 像 、 ア プレ ッ ト 、 動 画 、 ほ か の HTML 文書 な ど 、 さ ま ざ ま な デー タ を 
HTML 文書 に 埋め 込む と いう 汎用 的 な 性 質 を 持っ て いま す 。 つ まり 、<img>、<applet> な どこ 
れ ま で 別々 の タグ で 扱わ れ て いた デー タ を 、 一 括 し て 同じ タグ で 処理 し よう と する も の で す 。 そ 
の た め 、 デ ー タ 形式 に 応じ て さま ざま が な 属性 が 定義 され て いま す が 、 実際 の と ころ ブラ ウザ 側 で 
は まだ あま り 対 応 が な され て いま せん 。 こ こ で は 詳細 は 省略 し ます 。 





<P テ > 


<object data="ryokou.mpeg" type="appiication/mpeg" width="300" 
height="200"> 

<object data="ryokou.jpg" type="image/jpeg′ width="300" height="200" 
alt="10 月 の 社 貞 旅 行 の 様子 で す 。 "> 

</object> 

</object> 

</P> 
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※ 一 部 の 属性 は 対応 な し 


参照 Java アプ レッ ト を 利用 し た い ーーー p.282 





リヨン: コザ: コリ 隔 


<applet> へ </applet> 
<applet><param> や </applet> 





HTML 文書 に Java アプ レッ ト を 貼り 込む た め の タ グ で す 。 

Java は Sun Microsystems 社 が 開発 し た プロ グラ ミン グ 言 語 で 、OS に 依存 せ ず ユー ザー の 
マシ ン 上 で 実行 させ る こと が で きま す 。Java に つい て の 説明 は 本 書 の 域 を こえ る た めこ こ で は 扱 
いま せん 。p.330 に Java の 概要 に つい て は 、 掲 載 し て いま す が 、 詳 細 に つい て は Web ペー ジ や 
専門 書 を 参照 し こく だ さい 。 

な お 、HTML4.01 で は <applet> タグ は 廃止 され る 予定 と な っ て お り 、 代 わり に <object> タ 
グ (前 項 参照 ) の 使用 が 定義 され て いま す 。 し か し この <object> タグ は まだ ブラ ウザ 側 で あま 
り 対 応 し て いな いた め 、<applet> タグ が 引き 続き 利用 され て いま す 。 


OR すす RE 
<D> 
<applet code="audioitem" width="15" height="15"> 
<Param name="snd" value="organ.au"> 
オル ガン 曲 を 演奏 する Java アプ レッ ト 
</applet> 
</D> 
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イン ター ネッ ト 上 で 扱え る 画像 
Ed:4 ソ 4 

EEk キ の 3 の の 

通過 GIF で 表現 力 を 高め た い 

デー タ 転 送 中 の スト レス を 軽減 し た い 
動画 デー タ の 利用 

アニ メー ショ ン GIF を 作り た い 

ムー ビー を 使い た い 





Flash や Shockwave を 使い た い 
サウ ンド ・ デ ー タ を 使い た い 


マル チ メ デ ィ ア 
Web ペー ジ 


ンー アル / 
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MULTIMEDIA TECHNIOUE 





Windows や Macintosh で 画像 を 扱う 場合 、 基 本 的 な 画像 ファ イル 形式 と し て BMP や PICT 
な ど が 使わ れ て いま す 。 こ れ ら の ファ イル 形式 で は 画像 の ビク セル デー タ を その まま 保存 し て い 
る た め 、 フ ァイル サイ ズ が 大 き な も の と な り ま す 。 

一 方 イン ター ネッ ト の 世界 に お いて は 、 転 送 時 間 や ネッ トワ ー ク リソー ス の 消費 の 点 で 、 大 き 
な デー タ を 使用 する こと は 好ま し く あ り ま せん 。 そ こ で 、 イ ンタ ーネット 上 で は 、 主 に JPEG と 
GIF と いう 2 つの ファ イル 形式 が 使わ れ て いま す 。 ま た 、 最 近 で は ブラ ウザ 側 で の PNG 形式 へ 
の 対応 も 進め られ て いま す 。 こ れ ら の ファ イル 形式 で は デー タ を 圧縮 し て 保存 する こと が で き 、 
ファ イル サイ ズ を 小さ くす る こと が 可能 で す 。 


@ JPEG 


JPEG (Joint Photographic Experts GrouD) ファ イル で は 、1677 万 色 の 色 を 扱う こと が 
で き 、 写 真 な ど 微 妙 な 階 調 の 画像 を 保存 する の に 向い て いま す 。 保存 の 際 に 、 画 像 デー タ を 圧縮 
し て 保存 する か 、 圧 縮 せ ず に その まま 保存 する か を 選ぶ こと が で きま す 。 圧縮 する 場合 に は 画像 
デー タ か ら 色 の 情報 を 間引き し て 保存 する た め 、 画 質 は 劣化 し 、 圧 縮 率 が 高い ほど 画質 の 劣化 が 
目立つ よう に な り ま す (p.287 参照 )。 こ の た め 、 イ ンタ ーネット 上 で 使用 する 場合 に は 、 フ ァ イ 
ル サ イ ズ と 画質 を 比べ な が ら 折り 合い を つけ る 必要 が あり ます 。 圧縮 で 劣化 し た 画質 を 再び 元 に 
戻す こと は で きま せん 。 こ の よう な 圧縮 を 「 不 可逆 圧縮 ]」 と 言い ます 。 

また JPEG 形式 に は 、 ブ ラウ ザ へ 画像 を ダウ ン ロ ー ド し て 表示 する 際 の 方 法 を 決め る オプ ショ 
ン 設定 が あり ます 。 通常 の JPEG 画像 は ダウ ン ロ ー ド され る に し た が っ て 、 上 の 方 か ら 徐 々 に 画 
像 が 表示 され て いき ます 。 オ プシ ョ ン 設 定 ひ プログ レッ シ ブ JPEG 方 式 (p.297 参照 ) で 保存 さ 
れ た 画像 で は 、 ま す 画 像 全体 が まん や り し た 状態 で 表示 され 、 ダ ウン ロー ド が 進む に つれ 、 徐 々 
に 鮮明 に な っ て いき ます 。 





4 JPEG に 適し た 画像 例 


イン ター ネッ ト 上 で 扱え る 画像 


の - 


GIF (Graphics Interchange Format) ファ イル で 扱う こと の で きる 色 は 、256 色 ま で で す 。 
し た が っ て 、 色 数 の 多い 画像 の 場合 に は 、 類 似 色 同士 を まとめ る な どの 減色 処理 を 行う こと に な 
り ま す 。 色 数 の 少な い 、 は っ きり し た イラ スト な どの 画像 の 保存 に 向い た ファ イル 形式 で ある と 
言え る で し ょ う 。 

GIF 形式 に も JPEG 形式 と 同様 に 、 ダ ウン ロー ド 中 の 画像 の 表示 方 法 を 決定 する オプ ショ ン 設 
定 が あり ます 。 上 か ら 順 番 に 表示 し て いく 方 式 を ノン イン ター レー ス と いい ます 。 一 方 、 プ ログ 
レッ シブ JPEG の よう に まず モザ イク 状 の ぼん や り し た 状態 で 画像 全体 が 表示 され 、 ダ ウン ロー 
ド さ れる に し た が っ て 徐々 に 鐘 明 に な っ て いく 方 式 を イン ター レー ス と 言い ます (p.296 参照 )。 

また 、 現 在 GIF の 仕様 に は 、 主 に 87a と 89a と いう 2 種類 の バー ジョ ン が あり ます 。89a か 
ら は 、 透 過 色 と アニ メー ショ ン の サポ ー ト が 追加 され まし た 。 

透過 GIF で は 、 画像 で 使用 し て いる カラ ー バ レッ ト か ら 1 色 を 選び 、 透 過 色 と し て 設定 する こ 
と が で きま す 。 透過 GIF に 対応 し た ブラ ウザ な どの アプ リケーション で この 画像 を 表示 する と 、 
設定 され た 透過 色 の 部 分 は 透明 な 領域 と し て 扱わ れ ま す 。 壁紙 の 上 に 別 の 画像 を 重ね て 表示 する 
と き な ど に 便利 で す (p.294 参照 )。 

アニ メー ショ ン GIF は 、1 つの GIF ファ イル 内 に フレ ー ム と し て 複数 の 画像 を 記録 し 、 順 番 に 
表示 し て いく こと が 可能 で す 。 各 フレ ー ム の 表示 時 間 や 表示 位置 、 ア ニメーション の ルー プ な ど 
も 設定 する こと が で きま す (Dp.300 参照)。 
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| コ い 【c] 


GIF ファ イル で は 画像 の 圧縮 に LZW と いう 方 式 を 利用 し て いる た め 、GIF 対応 の アプ リ ケ ー シ 
ョ ン を 開発 する 場合 は 米国 Unisys 社 へ 特許 料 を 支払 う 必 要 が あり ます 。 こ の ライ セン ス 問 題 を 避 
ける た め 、PNG ファ イル で は 画像 の 圧縮 方 式 に ライ セン ス 料 の 発生 し な い ZIP を 採用 し て いま す 。 

PNG (Portable Network GraphicS) ファ イル に は 、 高 圧縮 率 と 同時 に 、 画 質 を 劣化 させ る 
こと な く 圧 縮 す る こと が 可能 な 「 可 逆 圧縮 」 を 行う と いう 特徴 が あり ます ( 注 : 画像 の 減色 と 圧縮 
保存 は 別 の 動作 で す 。 減 色 し て 保存 する 場合 に は 、 減 色 に 使用 する ツー ル に よっ て 画質 の 劣化 度合 
は 変化 し ます )。8 ビッ トカ ラー (256 色 ) で 利用 する 場合 は 、 同 じ 画 像 を GIF で 保存 し た 場合 よ 
り も ファ イル サイ ズ を 縮小 する こと が で きま す 。 最大 48 ビッ ト (280 兆 色 ) まで の フル カラ ー を 
サポ ー ト し て お り 、8 ビッ ト の アル ファ チャ ン ネ ル に よる 256 段 階 の 透過 レベ ル を 指定 する こと が 
可能 で す 。 また 、 PNG ファ イル は デー タ の 中 に 画像 の 明る さ を 指定 する ガン マ 値 を 含む た め 、 OS 
に よっ て 画像 の 色調 が 変わ る こと が あり ませ ん 。 イ ンタ ー レ ー ス の オプ ショ ン も 備え て いま す 。 

この よう に PNG 形式 に は さま ざま な メリ ッ ト が 存在 する も の の 、 ブ ラウ ザ 側 で の サポ ー ト が ま 
だ 完全 で は な いと いう 問題 が あり ます 。Netscape Navigator、Internet Explorer と も 、4.x 
以降 (Machintosh 版 Internet Explorer で は 5.x 以降 ) か ら 表 示 が 可能 と な っ て いま す が 、 現 
時 点 で は PNG の すべ て の 特徴 に は 対応 で き て いま せん 。 し か し 、 今後 イン ター ネッ ト 上 で の 主要 
な 画像 形式 と な っ て いく こと が 予想 され て いま す 。 

PNG 自体 に は アニ メー ショ ン 作 成 の オプ ショ ン は あり ませ ん が 、 現在 MNG (Multi-image 
Network GraphicS) と いう 動画 用 の 画像 形式 の 仕様 が 策定 中 で す 。 


i モー ド で 扱え る 画像 ELMLUCLLCCLCLLK エ エエ オメ エメ エナ ナナ STIXLKAXXAKXKXNKIKKLEKKLKKXX 


現在 | モー ド で は 、 一 部 の JPEG 対応 機種 を の ぞ き 、GIF 画像 の み を サポ ー ト し て いる の で 、 | モー ド 
用 の ペー ジ で 問題 な く 画 像 を 表示 させ る た め に は 使用 する 画像 を すべ て GIF 形式 で 保存 する 必要 が あり ま 
す 。 ま た 、 機 種 に よっ て 表示 で きる 色 数 や 、GIF の オブ ショ ン 設 定 へ の 対応 状況 が 異な る た め 、 注 意 が 必 
要 で す 。 透 過 GIF を 表示 で きる の は カラ ー 機 種 の 一 部 の み で す が 、 透 過 GIF に 対応 し て いな い 機 種 で は 、 
透過 色 が その まま 表示 され ます 。 

アニ メー ショ ン GIF も 一 部 の 機種 で は 対応 し て いま せん 。 ア ニメーション GIF に 対応 し て いな い 機種 で 
は 、 最 初 の フレ ー ム の み が 表 示さ れ ま す 。 | モー ド で 表示 で きる アニ メー ショ ン GIF に は いく つか 制限 が 
あり 、 表 示 で きる 最大 フレ ー ム 数 は 5 フレ ー ム まで 、 ま た 、 各 フレ ー ム が 同一 の サイ ズ で 、 開 始 座標 も 同 
ー で ある 必要 が あり ます 。 ル ー プ 再生 は 16 回 まで 行う こと が で き 、 設 定 値 が これ を 超え た 場合 は 、16 臣 
再生 後に アニ メー ショ ン が 停止 し ます 。 ア ニメーション GIF は 1 画面 に 最大 4 個 まで 表示 する こと が で き 
ます 。 

1 つの ペー ジ を 構成 する すべ て の ファ イル の 総 フ ァイル サイ ズ に は 、5KB まで と いう 制限 が あり ます 。 
この た め 、1 個 の 画像 ファ イル の サイ ズ は 2KB 以内 に 収め る こと が 推奨 され て いま す 。 

横 72x 縦 96 ピク セル 程度 の 画像 で お れ ば 、 ほ と ん どの 機種 上 て スク ロー ル さ せる こと な く 一 度 に 全体 
を 表示 する こと が で きま す 。 

1 モー ド 用 の Web ペー ジ に つい て は p.314 を 参照 し て くだ さい 。 


は よ トミ メ エメ メメ ミミ ミミ ミミ ミミ ミミ オミ オオ ミミ ます オナ ドド KTXKKKKKKKKKXXXAAIEKKKLKKIIKEKKLLKKKKEEKYYI 
































236 結 535 
GS 


MULTIMEDIA TECHNIQUE 





画像 を 利用 する こと で Web ペー ジ の 表現 の 幅 は 広がり ます が 、 ペ ー ジ 内 の 画像 が 増え る こと は 
表示 の た め の 読 み 込み 時 間 が 長く な る こと に も つなが り ま す 。 見 る 側 の スト レス を 減ら す た め 、 な 
る べく 画像 ファ イル の 数 を 少な く 、 フ ァイル サイ ズ を 小さ くす る よう 心がけ て お く 必 要 が あり ます 。 


⑯ ファ イル サイ ズ を 小さ くす る 


ファ イル サイ ズ を 小さ くす る 方 法 は ファ イル 形式 に よっ て 異な り ま す が 、 基 本 的 に は 画像 の 縦 
横 サ イズ の 小さ い 方 が ファ イル サイ ズ は 小さ く な り ま す 。 

GIF 形式 や 8 ビッ トカ ラー (256 色 ) の PNG 形式 で 保存 する 場合 に は 、 画 像 中 で 使用 し て い 
る 色 数 を 減ら すこ と で ファ イル サイ ズ を 縮小 する こと が で きま す 。 減 色 の 方 法 や 減色 後 の 画 質 は 
ツー ル に よっ て さま ざま で す が 、 減 色 に よる 画質 の 劣化 を 抑え る た め に は 、 初 めか ら 色 数 の 少な 
い 画 像 を 作成 し て お く よ う に し まし ょ う 。 た と えば 、 文 字 な ど を 画像 に する 場合 に は 、 文 字 に ア 
ンチ エイ リア ス を か け な い 設定 で 入力 を 行い ます 。 多少 エッ ジ の ギザ ギザ が 目立つ よう に な り ま 
す が 、 画像 で 使用 し て いる 色 数 は 大 幅 に 減る こと に な り ま す 。 

JPEG の 場合 は 、 圧 縮 率 を 高め る (画質 を 下げ る ) こと で ファ イル サイ ズ を 縮小 する こと が 
で きま す 。 ま た 、 画像 の コン トラ スト を 少し 低く し て お く と 同じ 圧縮 率 で も ファ イル サイ ズ は 小 
さく な り ま す 。 フ ァイル サイ ズ こ 画質 を 確か め な が ら 、 納 得する 圧縮 率 を 選ん で くだ さい 。 

















へ 圧縮 率 の 違い に よる JPEG ファ イル の 画像 。 左 か ら 画質 80 (ファ イル サイ ズ 50KB) 、 画 質 50 (ファ イル サイ ズ 25KB) 、 画 質 
10 (ファ イル サイ ズ 12KB) 





⑯ 使い 方 を 工夫 する 


一 度 読 み 込ん だ 画像 が キャ ッシュ に 残っ て いる 場合 に は 次 回 か ら の 表示 が 早く な り ま す 。 ロゴ 
な ど 、 使 い 回 せる も の は 複数 ペー ジ 間 で 同じ 画像 ファ イル を 読み 込 お よう に し まし ょ う 。 そ うす 
る こと で ペー ジ 全 体 に 統一 感 も 生ま れ ま す 。 

また 、 写 真 な ど 色 数 の 多い も の は JPEG、 イ ラス ト な ど 単 純 で 色 数 の 少な いも の は GIF と いう 

合 に 、 画 像 形式 を 特徴 に よっ て 使い 分 け ま し ょ う 。 写真 を GIF 用 に 減色 する と ザラ ザラ し た 感 
じ の 画像 に な り ま す 。 ま た 、 輪 郭 の は よっ つっ きり し た イラ スト や 文字 な ど を JPEG で 保存 する と 画質 
劣化 に よる 汚れ が 目立つ よう に な り ま す 。 画像 の 性 質 に 合っ た 形式 を 使う よう に 心がけ まし ょ う 。 


@⑯ 文字 な ど で 代 用 する 


文字 色 や 背景 色 な ど 、 タ グ の み で 色 を 変え る こと の で きる も の で 代用 する こと も 考え て み ま し 
よう 。 た と えば 、 文 字 色 を 1 文字 ずつ 変え る こと で 、 グ ラ デ ー シ ョ ン に 似 た 効果 を 得る こと が で 
きま す 。 ま た 、 テ ー ブ ル の 痛 景色 を 上 手 く 利用 する と 、 背 景 画像 を 使っ て いる よう な 印象 を 与え 
る こと も で きま す 。 こ の よう か 方法 で あれ ば 、 画 像 を 使用 し な いた め 読み 込み が 早く な り ま す 。 
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Paint Shop Pro CECCOCUOUULULULL は は スエ トメ トメ ナメ エメ ナメ メオ オミ ミエ エメ エミ エメ エミ ナメ ミナミ エメ エエ 


Paint Shop Pro は 、 低 価格 な が ら 高度 な 画像 編集 機能 を 備え た グラ フィ ッ ク ソ フト で す 。 

Version 7 で は レタ ッ チ 機能 が さら に 充実 し 、 初 心 者 で も 手軽 に 写真 補正 や 加工 を 行う こと が で きる よ 
うに な っ て いま す 。 ま た 、 前 バー ジョ ン か ら 加 わっ た ドロ ー 機 能 に も 改良 が 加え られ 、 操 作 性 が 向上 し て 
いま す 。 そ の ほか に も 、 マ ル チ レ イヤ ー 対 応 の パイ ント ツー ル と し て の 多く の 機能 を 備え て いま す 。 

Version 7 に は Web ペー ジ 作 成 に 便利 な 機能 と し て 、 本 書 で 紹介 する GIF や JPEG へ の エク スポ ー ト 
機能 や イメ ー ジ スラ イス 機能 が 搭載 され て いま す 。 ほ か に も イメ ー ジ マッ プ 機 能 で は 、 プ レビ ュー 画面 で 
範囲 を 指定 し な が ら 、HTML ファ イル ヘ へ クリッ カブ ル マ ッ プ の 設定 を 書き 出す こと が で きま す 。 
Paint Shop Pro の 体験 版 (30 日 間 限 定 ) は 、 い ろ い ろ な パソ コン 雑誌 に も 収録 され て お り 、 簡 単に 入 
手 す る こと が で きま す 。 ま た 、 国 内 販売 代理 店 で ある P&A の Web サイ ト に は 、 日 本 語 版 の 体験 版 も 用 意 
され て いま す 。 製 品 版 は 、 店 頭 で の パッ ケー ジ 販 売 の ほか に 、 下 記 の URL や ソフ トウ ェ ア ダ ウン ロー ド 
サイ ト か ら オ ン ラ イン で 購入 する こと が 可能 で す 。 







































































Jasc Software Inc. (製造 元 ) 
http://www.jasc.com/ 

(株 ) P&A (国内 販売 代理 店 ) 
http://www.panda.co.jp/ 





標準 価格 : 14,800 円 (通常 版 )、9.800 円 (乗換 版 )、7,800 円 (アカ デミ ッ ク 版 ) 
対応 OS : Windows95/98/ME/NT4.0/2000 
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Web ペー ジ で 利用 する た め 、 デ ジタル カメ ラ で 撮影 を 行う 人 も 多い で し ょ う 。 し か し 、 そ の ま 
ま 使 用 で きる レベ ル の 写真 を 撮る こと は 難し く 、 た いて い の 場 合 は グラ フィ ッ ク ソ フト を 使っ た 
な ん ら か の 補正 が 必要 と な り ま す 。 

まず 、 見 栄え の する 構図 と な る よう に 、 写 真 の 必要 な 部 分 だ け を 切り 抜い て お いた ほう が よい 
で し ょ う 。 ま た 、 画 像 に 写っ た ゴミ や キズ な ど は 、 ス クラ ッ チ 機能 や 周囲 の 色 を コピ ー す る クロ 
ー ン ブラ シ 機 能 を 使う と 消す こと が で きま す 。 

次 に 、 明 る さ ・ 色 調 ・ 画 質 な ど を 補正 し ます 。 デ ジ カ メ で 撮影 し た 写真 の 場合 、 暗 く 平 坦 な 印 
象 に 写り が ちな の で 、 ガ ンマ 補正 や 明る さ ・ コ ント ラス ト の 補正 が 必要 と な り ま す 。 デ ジタル 画 
像 で は ピク セル が 色 の 情報 を 含ん で いれ ば 、 ア ナ ロ グ の 場合 より も 手軽 に 補正 を 行う こと が で き 
ます 。 し か し 、 真 っ 黒 な 影 や 光 が 当 た っ て 白く 飛ん で いる 部 分 な ど は 、 色 の 情報 を 持っ て いな い 
の で 補正 する こと が で きま せん 。 

蛍光 灯 の 下 で 撮っ た 写真 は 緑 が か っ て いる こと が あり ます 。 ま た 、 夕 方 に 撮っ た 写真 は 黄色 っ 
ぽく 写っ て いる こと が あり ます 。 こ の よう に イメ ー ジ 通り に 写ら な か っ た 色調 も 補正 する こと が 
で きま す 。 色調 の 補正 は 、 た と えば 人 物 の 肌 な ど 基 準 と な る 部 分 を 決め て お き 、 そ の 部 分 が イメ 
ー ジ 通り の 色 と な る よう に 調整 し て いく と わか りや すい で し ょ う 。 カ ラー バラ ンス や 色相 ・ 明 
度 ・ 彩 度 な ど に よっ て 補正 し ます 。 

画像 全体 の イメ ー ジ が ぼん や り し て いる の で あれ ば 、 シ ャ ー プ 処理 を 行う 機能 を 使っ て 引き 締 
め ま す 。 逆 に 画像 を ぼかす 機能 を 使う と 、 ソ フト フォ ー カ ス が か か っ た よう な 効果 や 遠近 感動 
き な ど の 効果 を 作る こと が で きま す 。 

Paint Shop Pro7 (前 ペー ジ 参 照 ) を 使っ て 、 画像 を 補正 し て み ま し ょ う 。 


⑯ 明る さ の 補正 


1 この 写真 は 、 被 写 体 が 暗く 写っ て し まっ 
て いま す 。 








2 Paint Shop Pro7 に は 写真 の 自動 補正 機 
能 ち あり ます が 、 こ こ で は 「 ガ ンマ 補正 」 
を 使っ て 補正 し て み ま す 。 

[カラ ー] 一 [調整 ]*[ ガ ンマ 補正 .…] を 選ん 
で ダイ アロ グ を 表示 し ます 。[ リ ンク ] に 
チェ ッ ク を 入れ た まま スラ イダ を 動か す 
と 、RGB すべ て の 値 が 同時 に 変更 され ま 
す 。RGB の 値 は 1 が デフ ォ ル ト で す 。 画 
像 を 明る くす る 場合 は 、、 プ レビ ュー を 見 | ・・「「 | 
な が ら 値 を 増やし て いき ます 。 


線 ⑬ 





3 画面 全体 の 色 が 明る く な り ま し た 。 極端 
な 補正 を 行っ た り 補正 を 繰り 返し た りす 
画像 の 劣化 が 目立つ よう に な る の 

で 注意 し て くだ さい 。 
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⑯ 色調 の 補正 


今度 は 色調 を 補正 し て み ま す 。 こ の 写真 
は 、 夕 暮れ 時 で 全体 に オレ ンジ が か っ て 
いま す 。 





2 ここ で も 「 ガ ンマ 補正 ]」 を 使っ て 補正 し 
て み ま し ょ う 。 先 に 「 リ ンク 」 の チェ ッ 
ク を 外し て お きま す 。 ま ず 黄 色 を 抑え た 
い の で 、 黄 色 の 補色 で ある 青 の ス ライ ダ 
を 動か し て 値 を 増やし ます 。 次 に 、 赤 を 
抑え る た め 、 赤 の スラ イダ を 動か し て 値 
を 減ら し ます 。 


キン | へ ウ |1 器 


3 補正 され て 、 普 通 に 昼間 に 撮影 し た よう 
に な り ま し た 。 
色調 を 正しく 補正 する に は 、 色 に つい て 
の 知識 が 必要 と な り ま す 。 
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@⑯ 画質 の 補正 





1 ピン ぼけ の 写真 も や デジ タル で あれ ば 簡単 


に 補正 で きま す 。 


2 [効果 ] [シャ ー プ ネス ] [アン シ 
ャ ー プ マス ク .…] を 選ん で 、 ダ イア ログ を 
表示 し ます 。「 半 径 」 は 輪郭 線 の 幅 、「 強 
さ 」 は 輪郭 線 の コン トラ スト な ど を 高め 
る 量 、「 ク リッ ピン グ 」 は どの 程度 の コン 
トラ スト の 部 分 を 輪郭 線 と する か を 指定 
し ます 。「 半 径 」 に は 通常 0.5 一 2 程度 の 
設定 が 使わ れ ま す 。 


3③ は っ きり し た 画像 に な り ま し た 。 








ズー ム 11 ィ 
EEEI 
fs「 二 


半径 強 さ ⑤ 


クリ ッ ピン グ ⑥* 


f 90 ヨ ョ 20 ヨ ヨ 『 ゴ | 
[OK |] キャ ン ル ^ ル プ | 史 | 
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透過 (GIF は 、 前 述 の 通り GIF 形式 の オブ ショ ン で す 。 画像 で 使用 し て いる カラ ー パ レッ ト か ら 
1 色 を 選び 透過 色 と し て 設定 する と 、 ブ ラウ ザ な ど で は その 色 で 塗ら れ て いる ピク セル は 透明 な も 
の と し て 扱わ れ ま す 。 こ の た め 、 透 明 な フィ ルム に 描か れ た セル 画 の よう に 、 透 過 色 で 塗ら れ て 
いる ピク セル で は 背景 が 透け て 見 えま す 。 

透過 GIF は 背景 画像 の 上 に 別 の 画像 を 重ね て 表示 する 場合 に 有効 で す が 、 ほ か に も 便利 な 使い 
方 が あり ます 。 透過 色 の み で 塗り つぶ され た 透過 GIF を 用 意 し て お く と 、 こ の 目 に 見 えな い 画像 
を 読み 込む こと に よっ て 、 文 書 中 に 自由 な サイ ズ で スペ ー ス を 空け る こと が で きる の で す 。 表示 
する 際 の 画像 の サイ ズ は <img> タグ の サイ ズ 指 定 で 自由 に 指定 する こと が で きる の で 、 用 意 する 
透過 GIF の サイ ズ は 1x1 ピク セル な どの 小さ な も の で 構い ませ ん 。 


午 sample - Microsoft Internet Explorer 





人 透過 GIF に する と 絵柄 を 背景 - な じ ま せ る こと が で きま す 
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⑯ 透過 GIF 画像 の 作り 方 


1 Paint Shop Pro7 を 使っ て 、 背 景 部 分 を 


透過 色 に 設定 し て み ま し ょ う 。 99 
[ファ イル ] 一 [エク スポ ー ト ] 一 [GIF イメ 
ー ジ .…] を 選ん で 、 ダ イア ログ を 表示 し | 下 m woe mw est 
人 | 遂 由 の 定義 | 到  』 フ ォ ー マ ッ ト | ダウ ロー ド e4 間 | 
ます 。 eu 区 
先 に 、[ 名 ] タブ で 濾 色 の 方 法 に つい て 設計 
定 し て お いた 方 が よい で し ょ う 。 て の ol 「 maroe sigtp 


で 標準 /Web セー つ ⑤ 


( 最適 人 OMedan CO Sa 陸 





( 最適 化 OcweoOD 「 Windowe カラ ー を きめ ゃ ⑪ 


2 次 に [透過 色 ] タブ を 開き 、 透 過 領 域 と 
し て 「 次 の 色 に 合致 する 領域 】 を 選び ま 
す 。 画像 の イメ ー ジ ウィ ンド ウ 上 に カー 
ソル を 持っ て 行く と 、 ス ポイ ト に 変わ り 
ます 。 背 景 部 分 で クリ ッ ク す る と 、 痛 景 
の 色 が 透過 色 と し て 設定 され ます 。 





地 和 104040 バイ ト 本 
| 居 の 直義 色 | フォ ー マ ッ ト | ダウンロ ー ド 間 | 


イメ ー ジ の どの 競 分 を 知 週 こし ます が か? 


T gL⑩ 
『 厩 邊 の イメ ー ジ また | は レイ ヤー の 才 志 内 5) 
て 居所 


cause 衝 人 

で の 名 に 人 致す る 強 穫 0 計 識 ( 
"| 

驚 ら ザー ド き ほう | [し WW_ ] キン セル ヘル プ 





3③ すべ て の 設定 が 終わ っ た ら [OK] を クリ 
ッ ク し て 保存 し ます 。 
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ファ イル サイ ズ を 小さ くし て も 、 画 像 の 読み 込み に は ある 程度 の 時 間 が か か り ま す 。 Web ペー 
ジ を 表示 する 際 に 画像 の 概要 が は じ め に わか る よう に し て お く と 、 見 る 側 で は 何 が 表示 され る の 
か イラ イラ と 待つ 必要 が な く な り ま す 。 

GIF や PNG の イン ター レー ス オ プ ショ ン は 、 は じ め は 画像 全体 を 荒い モザ イク 状 に 表示 し 、 
デー タ を 読み 込む に つれ て だ ん だ ん 詳細 に 表示 し て いく よう に する オプ ショ ン で す 。 プ ログ レッ 
シ ヴ JPEG も 同様 に 、 読 み 込 む に つれ て 画像 が 徐々 に 鮮明 に な っ て いき ます 。 

これ ら の オプ ショ ン を 利用 する ほか に も 、<img> タグ に 画像 の 横 縦 の サイ ズ (width、 height) 
や 説明 (alt) な どの 属性 を 記述 し て お く こ と で 、 す べ て の 読み 込み が 終わ る 前 に Web ペー ジ 全 
体 の 概要 を 読み 取る こと が で きる よう に な り ま す 。 


⑱$ イン ター レー ス GIF の 作り 方 


1 Paint Shop Pro7 の 「GIF イ メー ジ の エ 8 
クス ポー ト 」 ダイ アロ グ を 使っ て 保存 す 
る 場合 、、[ フ ォ ー マ ッ ト ] タブ で タイ ブ 


を 「 イ ンタ レー ス 」 に 設定 し ます 。 ks 495.F 


直 名 | 條 の 定義 | 色 フォー マッ ト | ダウ > ローh4 間 | 
[ファ イル ] [上 書き 保存 な ど で 人 | 2 和博 寺 放 
存する 場合 に は 、 保 存 ダ イア ログ で ファ どの 3 イブ で 人 人 しま すか? どの /(ー ジ で し ます が 9 
イル の 種類 に GIF を 選び 「 オ プシ ョ ン 」 | の 還 2 
ボタ ン を クリ ッ ク し て オプ ショ ン を 選択 
し ます 。 ーー 





296 データ 転 送 中 の スト レス を 軽減 し た い 


し 瑞 4= レ スジ シル クア パリ ココ c セ ミソ) ジル 





1 Paint Shop Pro7 の [ファ イル ] 一 [ エ 
クス ポー ト ] … [JPEG イメ ー ジ .…] を 
選ん で 、 ダ イア ログ を 表示 し ます 。[ 画 質 ] 
タブ で 圧縮 率 を 設定 し た 後 、[ フ ォ ー マ ッ 

画質 フォ ー マ ッ ト | ぷと ロー ド 4 間 | 
ト ] タブ で 「 プ ログ レッ シブ 」 を 選択 し | 03 あか で エン コー ディ ング ah ます 。 


まず 。 どの タイ ブ で 人 季 し ます か 


スタ シン ダード 悦 








邊 sample - Microsoft Internet Explorer 


プイ ル (P) 編集 E) 表示 ⑦ お 気に入り ⑳) ツール ① ヘル フ ⑪ 





Microsoft Internet Explorer 


アイ ル (E) 編集 (D 表示 お 気 に 入 D⑯ ツー ル ① ヘル ブ ⑪ 





Microsoft Internet Explorer 





^ ム インター レー ス GIF で や プログレッシブ JPEG で は 、 こ の よう に 最初 に 画像 全体 の イメ ー ジ が 表示 され 、 徐 々 に 鮮明 な 画像 に な 
り ま す 
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⑯ スラ イス -- 画像 を 分 割 し て 表示 を 速く する 


Web ペー ジ を 開い た と き に 、 画 像 が 全体 の 途中 の 部 分 か ら バ ラバ ラ に 表示 され て いく の を 目 に 
し た こと が ある 人 も 多い か と 思い ます 。 こ の よう な ペー ジ で は 、 大 きか 画像 を 複数 の 小 べ な パー 
ツ に 切り 分 け て 分 割 し て お き 、 そ れ ら を ブラ ウザ 上 で 順番 に 隙間 な く 並 べ て 表示 させ る こと で 再 
構成 する と いう 手法 が 使わ れ て いま す 。 画像 の 再 構成 は 、 主 に テー ブル に よっ て 行わ れ て いま す 。 
この 手法 を 「 ス ライ ス 」 と 言い ます 。 

大 き な 画 像 を スラ イス する メリ ッ ト は 、 第 一 に 、 バ ー ツ ご と に 最適 な 画像 形式 で 保存 する こと 
が で きる た め 、 全 体 と し て の 画質 が 向上 する だ け で な く 、 フ ァイル サイ ズ の 総計 を 小さ く で きる 
と いう 点 で す 。 画像 内 の 一 部 に リン ク や ロー ルオ ー バ ー を 設定 し た り 、 画 像 の 一 部 分 だ け を 変更 
し た りす る の も 簡単 で す 。 ま た 、 画 像 を 再 構成 する と き に 、 バ パー ハツ 画像 を テー ブル の セル の 背景 
画像 と し て 利用 し た り 、 セ ル 内 へ パー ツ 画 像 で は な く テ キス ト を 挿入 し た りす る こと も で きる の 
で 、 複 雑 な レイ アウ ト が 実現 で を る よう に な り ま す 。 

最近 の 画像 ソフ ト に は 、 画 像 を スラ イス し て 個別 に 保存 する た め の 「 ス ライ ス 機 能 ]」 を 備え た 
も の も 増え て きま し た 。 こ の 機能 を 利用 する と 、 元 画像 を 実際 に 分 割 し な く て も 、1 つの 画像 ファ 
イル 上 に 複数 の スラ イス 領域 を 作成 し 、 そ れ ぞ れ に 対し 最適 化 設定 を 行っ て Web 用 に 保存 する こ 
と が で きる だ け で な く 、 テ ー ブ ル を 使っ て 再 構成 する た め の HTML ファ イル な 自動 的 に 書き 出す 
こと が で きま す 。 


うつ 月 さ ヽ 記さ 口 い き < 
P きく と プペ >ー プ で <「 問 に 








人 Macromedia 社 FireworkSs 4 で 、 ス ライ ス 設 定 を 行っ て いる と ころ 。1 枚 の 画像 を 赤い 線 で 示さ れ て いる よう に 分 割 し ます 。 こ 
の よう に 、 ス ライ ス 機 能 の ある 画像 ソフ ト で は 、 画像 ファ イル 内 に スラ イス 設定 を 保存 する こと が で きま す 


Macromedia 社 
http://www.macromedia.com/jp/ 


Macromedia Dreamweaver Fireworks Studio 
標準 価格 : 22,000 円 (通常 版 ) 
対応 OS : Windows 95/98/ME/NT4.0/2000/XP MacOS 8.6/9.0 


298 デー タ 転 送 中 の スト レス を 軽減 し た い 
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お 知ら せ の 文字 が 点滅 する 、 バ ナー が 回 転 す る 、 キ ャ ラク ター が 動き 回 る な ど 、Web ペー ジ に 
動き を 持た せる の は 訪問 者 の 目 を 引く 有効 な 手段 で す 。 ま た 、 リ ンク 箇所 に マウ ス を 持っ て 行く 
と 色 が 変わ っ た り 、 ボ タン が 押さ れ た りす る よう な イン ター フェ イス や 、Web 上 で 実行 可能 な ゲ 
ー ム 、 自 分 で 撮影 ・ 編 集 し た ビデ オム ー ビ ー の 公開 な ど 、Web ペー ジ 上 で は ます ます 動画 が 利用 
され る よう に な っ て きま し た 。Web ペー ジ に 動き を 持た せる 方 法 に は <marquee> タグ を 使っ 
た テキ スト の スク ロー ル や 、<blink> タグ に よる テキ スト の 点滅 な ども あり ます が 、 こ れ ら の テ 
キス ト の 装飾 に つい て は それ ぞ れ の タグ に 関す る 説明 を 参照 し こく だ さい 。 

動画 に は 普通 の 画像 と 同様 扱う こと の で きる も の の ほか に 、 プ ラグ イン を 必要 と する も の や 、 
Java ア プレ ッ ト 、JavaScript な ど と 組み 合わ せ て 実現 する も の な ど が あり ます 。Java 関連 の 
解説 は この 項 の 範囲 を 超え る の で 、Java の 頂 や 他 の 解説 書 な ど を 参照 し こく だ さい 。 次 項 以降 で 
は よく 利用 され る 動画 形式 に つい て 説明 し ます 。 
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アニ メー ショ ン GIF は GIF 形式 の オプ ショ ン で 、 も っ と も 手軽 な 動画 形式 で す 。 ひ と つの ファ 
イル 内 に 複数 の GIF 画像 を それ ぞ れ フレ ー ム と し て 保存 し 、 こ れ を 順番 に 表示 する こと で アニ メ 
ーション と し て 表現 し ます 。 作 成 が 簡単 で ちり 、<img> タグ で 通常 の GIF ファ イル と 同様 に 扱う 
こと が で きる と いう 利点 を 持ち ます が 、 フ ァイル サイ ズ が 大 きく な り が ち で あり 表示 の 際 の 処理 
も や や 重い た め 、 同 一 ペー ジ 内 に 複数 の アニ メー ショ ン GIF を 使用 する 場合 に は 注意 が 必要 で す 。 


1 GIF アニ メー ショ ン 作 成 ツ ー ル 
「Animation GIF Maker」 を 使っ て 、 ア 
ニメーション GIF を 作成 し て み ま し ょ う 。 
先 に 、 ア ニメーション の 各 フ レー ム と な 





る GIF 画像 を 用 意 し ます 。 
人 anime1.gif 全 anime2.qif 人 anime3.qif 人 anime4.qif 


2 左側 の [ファ イル ] タブ か ら GIF 画像 の 
画像 リ アル 5 た 2 その 他 | nzwx 婦 - ッ 20 xR2O 暫 muD 


人 造 | Io 人 
animel g) 
2 anme2eif) 


ファ イル を 選ん で 、 順 番 に 右側 の 
スト に 追加 し ます 。 








anme3ei) 
anime4 et) 


で * 


指定 GC テ フル | LS サ 9f12” | ァイル サ イア 22460 
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3 各 フ レー ム の 設定 は [パラメータ] タブ 
で 行い ます 。 画像 リス ト か ら 画 像 (フレ 
ー ム ) を 選ん で 、 左 側 の ダイ アロ グ で 設 本 
定 を 変更 し ます 。 変更 箇所 は 赤字 で 表示 | 央 00 1a0d200 
され ます 。 最後 に [更新 ] ボタ ン を クリ 
ッ ク し て 、 画 像 リス ト に 変更 を 反映 させ 
ます 。 





4 [その 他 ] タブ で は 、 ブ ラウ ザ で 表示 を 
確認 し た り 、 タ グ を 作成 し た りす る こと 





上 Ia 
が で きま す 。 こ こ で 表示 を 確認 し て は | 9) 100 2 
ame3() 120x12020 


[パラ メー タ ] タブ に 戻り 、 各 フレ ー ム の | aime4ei) 。 00 120x12020 
ディ レイ (表示 時 間 ) な ど を 設定 し て い 間 
く と よい で し ょ う 。 設定 が 終わ っ た ら 、 
[作成 ] ボタ ン を クリ ッ ク し て アニ メー シ 
ョ ン GIF を 保存 し ます 。 


Animation GIF Maker EEECCEELLLLLLLLLLLLLLLLSLLSSSSSSSSSSSLLLLLLLSLSSSLLL 


Animation GIF Maker は 、 服 部 宣 広 氏 に よる フリ ー の アニ メー ショ ン GIF 作成 ソフ ト で す 。 

は っ と り ワ ー ル ド (http://Www.hornet-works.com/hattoriworld/) や 、Vector な どか ら ダ ウン ロー 
ド す る こと が で きま す 。Animation GIF Maker で は アニ メー ショ ン の 元 に な る GIF 画像 を 作成 する こと 
は で き な い の で 、 あ ら か じ め ほ か の グラ フィ ッ ク ソ フト を 使っ て GIF 画像 を 作成 し て お く 必 要 が あり ます 。 
作成 中 の アニ メー ショ ン の 表示 に は 、 ブ ラウ ザ が 使用 され ます 。 


POTOCYYEIEKLLEEELEAKKRRRARRRRLRLLLLLIRIIIRIRRIRRIRLLKRRAAALIIIIRIEIIRLLLXSSI 
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ムー ビー に は さま ざま な ファ イル 形式 が あり ます 。 イ ンタ ーネット 上 で は 主 に 、QuickTime、 
AVI、MPEG の 3 種類 の 形式 が 利用 され て いま す 。 こ れ ら の 形式 で は 動画 だ け で な く 音 声 の 記録 
も 可能 で す 。 


QuickTime 「.qt」「.mov」 

QuickTime は Apple 社 が Macintosh 用 に 開発 し た 動画 有 有 ソフ トウ ェ ア で 、Windows や 
UNIX 環 境 で も 広く 利用 され て いま す 。 本来 の QuickTime 用 の ファ イル 形式 で ある QT、MOV 
な どの ほか に 、 現 在 で は Windows 標準 の 動画 ・ 音 声 形 式 で ある AVI 形式 や WAV 形式 の 再生 も 
可能 と な っ て いま す 。 ISO (国際 標準 化 機構 ) に より 動画 形式 の 国際 標準 MPEG-4 規格 と し て 採 
用 され て お り 、 現 在 も っ と も 汎用 性 の ある 動画 形式 で す 。 


AVI 「.avi」 

Microsoft 社 が 開発 し た 、Windows で 動画 を 扱う た め の フ ァイル 形式 で 、Windows に 附属 
の Media Player な ど で 再 生 で きま す 。Macintosh 上 で も QuickTime 3.0 以 降 を 利用 する こと 
で 再生 が 可能 で す 。 


MPEG「.mpeg」 

ISO (国際 標準 化 機構 ) に より 仕様 が 策定 され た 、 動 画 ・ 音 声 形式 の 国際 標準 規格 で す 。 動 
画 ・ 音 声 デ ー タ と も 非常 に 高い 圧縮 率 を 実現 し て いま す が 、 動 画 の 各 コ マ を 比較 し て 変化 の ある 
部 分 だ け を 記録 する な どの 方 法 で デー タ を 圧縮 する た め 、 動 き の 大 き な 動 画 の 場合 な ど に は 圧縮 
率 が 落ち る こと に な り ま す 。 再生 品質 に よっ て MPEG- 1 から MPEG-4 まで の 各 規 格 が 制定 され 
て お り 、 現在 は マル チ メ デ ィ ア に お ける 利用 を 考慮 し た MPEG-7 規格 の 標準 化 が 進め られ て いま す 。 

MPEG 形式 の うち 音声 デー タ 部 分 の み を 保存 し た MP2、MP3 な どの 音声 ファ イル 形式 も よく 
利用 され て いま す 。 
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再生 に は 専用 の ソフ トウ ェ ア ま た は プラ グイ ン な どか が 必要 な 場合 も わる の で 、 ム ー ビ ー を 扱う 
際 に は 見 る 側 の 環境 を 考慮 し て お か な けれ ば な り ま せん 。 余裕 が あれ ば 、 何 種類 か の ファ イル を 
用 意 し て お いた 方 が よい で し ょ う 。 そ の 場合 、.avi と .Imov ファ イル を 用 意 し て お け ば 、 た いて い 
の 環境 で 再生 可能 で す 。1 種類 に 絞る 場合 に は 、 汎 用 性 の 高い .mov ファ イル が お 勧め で す 。 
HTML 上 で は 、<a> タグ で ムー ビー ファ イル に 直接 リン ク さ せる か 、<embed> タグ で ペー ジ 
内 に ムー ビー ファ イル を 貼り 込み ます 。 一般 に ムー ビー は ファ イル サイ ズ が 大 きく な る の で 、 ム 
ー ビ ー を サポ ー ト し て いな い 環 境 や 転送 速度 に 問題 の あめ る 人 の た め の 配 慮 も 必要 で す 。 事 前 に フ 
ァイル 形式 や ファ イル サイ ズ な どの 説明 を 表示 し て お く 、 画 像 の 表示 され る は ず の 場所 に 言葉 で 
の 説明 を 追加 し て お く な どの 対応 を し て お きま し よう 。 

ムー ビー ファ イル の 作成 に は 、 ビ デオ カメ ラ の 映像 を ビデ オキ ャ プチ ャ カー ド を 使っ て 取り 込 
お 方 法 や 、 デ ジタル ビデ オ の デー タ を その まま 利用 する 方 法 な ど が あり ます 。 ま た 、 グ ラフ ィ ッ 
クソ フト で 作成 し た 画像 を 使っ た アニ メー ショ ン を 作成 する こと も で きま す 。 

動画 編集 アプ リケーション は 、 プ ロ 仕 様 の 本 格 的 な 編集 ツー ル で ある Adobe 社 の Premiere を 
は じ め と し て 、 さ ま ざ ま な も の が 提供 され て いま す 。 個 人 で 楽し わり た めで あれ ば 、 デ ジタル ビデ 
オメ ー カ ー が 紹介 し て いる 家庭 用 ビデ オ 編 集 ツ ー ル な ど が わか りや すく 、 十 分 な 機能 を 備え て い 
ます 。 


スト リー ミン グ ビ デ オ スス スミ トス スミス スミ ミス スス ミス ミミ ミミ ミミ ミミ ネス ミミ ミネ メオ ミミ ミミ ミミ ミミ ネネ ミミ ネネ スミ ネネ ネネ ミネ ミミ:】 


QuickTime、AVI、MPEG と も 、 す べ て の デー タ を ダウ ン ロ ー ド し て か ら 再 生 を 開始 する た め 、 再 生 
まで に 長 時 間 待 た な けれ ば な り ま せん 。 この 待ち 時 間 を 解消 する た め に 開発 され た の が 「 ス トリ ー ミ ング ] 
と 呼ば れる 技術 で 、 デ ー タ を ダウ ン ロ ー ド し な が ら 同 時 に 受信 側 で 再生 を 行う こと が 可能 で す 。 代 表 的 な 
も の に 「RealVideo」 「StreamWorks」 「VDOLive」「VivoActive] な ど が あり ます 。 こ れ ら の 方 式 で 作 
成 さ れ た コン テン ツ に は 互換 性 が な いた め 、 そ れ ぞ れ 専 用 の ブラ グイ ン が 必要 と な り ま す 。 


OCTTTYTYYKKLKLLLTKKLYKTLKKKKK ス KK スス スス スス スス スミ スミ ミミ ミミ ミト トミ トミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ ミミ まま まま ます オ えま ます 】 
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Shockwave と は 、Macromedia 社 か ら 提供 され て いる 一 群 の ブラ ウザ 用 の プラ グイ ン ソ フ 

トウ ェ ア の 総称 で す 。 こ れ ら の プラ グイ ン を 使用 する と 、Macromedia 社 の Flash、Director、 

Authorware、Freehand な どの ソフ トウ ェ ア で 作成 され た デー タ を ブラ ウザ 上 で 表示 ・ 再 生 す 
る こと が 可能 と な り ま す 。 


Flash Player 

プラ グイ ン の ひと つ で ある Flash Player は 、 近 年 人 気 を 集め て いる Flash に よっ て 作成 され た 
デー タ (.swf、.spl) を 再生 する た め に 必要 な も の で 、MAC OS 9 や Internet Explorer、 
Netscape な ど で は 標準 搭載 され て いま す (た だ し 、 搭 載 さ れ て いる プラ グイ ン が 最新 バー ジョ 
ン で は な いこ と も あり ます )。 

Flash は ベク トル デー タ を 使っ て 、 ド ロー ベー ス の グラ フィ ッ ク ・ ア ニメーション を 作成 する 
た め の ツ ー ル で す 。 ベ クト ル デ ー タ を 使用 する た め デ ー タ 量 は 小さ く て すみ 、 拡 大 ・ 縮 小 に よっ 
て 画質 が 落ち る こと が あり ませ ん 。 ま た 、 拡 大 し て も デー タ 量 は 変わ り ま せん 。 ベク トル デー タ 
以外 に も 、PICT、GIF、JPEG、PNG な どの 画像 ファ イル 、WAV な どの 音声 ファ イル を 読み 
込む こと が で き 、 し か も 、 元 に な る ひけ と つの ファ イル デー タ か ら 、 こ の デー タ を 拡大 ・ 縮 小 し た 
り 、 回 転 ・ 移 動 さ せ た り する アニ メー ショ ン を 作成 で きる た め 、 フ レー ム ご と に 別 の デー タ を 用 
意 する 必要 が あり ませ ん 。 ス クリ プ ト を 組み 込む こと で 、 ク リッ カブ ル マ ッ プ や 対話 型 の コン テ 
ン ツ を 作成 する こと も 可能 で す 。Flash で 作成 され る SWF ファ イル も 、 ス トリ ー ミ ング 再生 に 対 
応 し て いま す 。 

SWF ファ イル は Macromedia 社 の 製品 だ け で な く 、Adobe 社 の LiveMotion な ど で も 作成 
可能 で す 。 


Shockwave Player 

Shockwave Player は 、Director で 作成 し た ムー ビー (.dcr、.dir、.dxr) を 再生 する た め の 
プラ グイ ン と し て 、 多 く の Web 制 作者 に 支持 され て いま す 。Director は LINGO と いう マク ロ 
言語 に よっ て 詳細 な 制御 を 行い 、CD-ROM コン テン ツ や ゲー ム 、 ア ニメーション な ど 高 度 な マ 
ル チ メ ディ アコ ン テ ン ツ を 作成 する こと の で きる ツー ル で す が 、Web 用 に 機能 を 限定 し た 
Director Lite も 発売 され て いま す 。Shockwave ムー ビー は 、 デ ー タ を ダウ ン ロ ー ド し な が ら ム 
ー ビ ー の 再生 を 行う スト リー ミン グ 再 生 に 対応 し て いま す 。 
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Shockwave コン テン ツ 掲 載 の 注意 





HTML 上 で は 、<embed> タグ で Shockwave コン テン ツ を 貼り 込み ます 。 

見 る 側 の 環境 に 古い バー ジョ ン の プラ グイ ン が イン ス トー ル さ れ て いる 場合 に は 、 最 新版 の ツ 
ー ル で 作成 し た Shockwave や Flash の ムー ビー を 再生 で き な い こと が あり ます 。 ペ ー ジ 内 で こ 
れ ら の ムー ビー を 使用 する 際 に は 、 最 新 の プラ グイ ン の ダウ ン ロ ー ド ペー ジ へ の リン ク を 用 意 し 
て お いた 方 が よい で し ょ う 。 Shockwave Player や Flash Player は 、Macromedia 社 の Web 
サイ ト か ら 無 料 で ダウ ン ロ ー ド する こと が で きま す 。 

和 Macromedia - ダウ ン ロ ー ド - Microsoft jnternet Explorer 


ファ イル 編集 6) 表示 お 気 に 和 D⑧ ツー ル ① へ JM プ ⑪ 
イン ター ナシ ョ ナル サイ トマ ッ プ 会 社 偶 幅 の 当 


macromedia 了 四 デア ザイ ナー & デベ ロッ パー タ ー ド スト ア 
かこ 55 の y イ ト Blacremedie rluh lsver も を 人 放し で いま す 。 PA Payer 6 を 人 用 9 導き は 、 こ 5 を クリ ッ ク レ て くだ さい 


ダウ ン ロ ー ド 


マク ロメ ディ ア 製 品 の アッ プ デ ー ト や 、Xtras や プラ グイ ン な どの 機能 が 追加 で きま す 。 
3 日間 、 無償 で ご 利用 尼 け る トラ イ テ ル 誠 も ご 利用 いた だ け ま す 。 


ェ ョ イア 』 リ 用 の 皆 欄 - 
acromedia HomeSite 5 日 本 語 トラ イア ル 阪 を アン イン スト ー ル する と 、 他 の アプ リケーション の 妃 動 時 に 0 ま ・ 名 、 所 
属 名 シリ アル 番号 の 入力 を 求め る ダイ アロ グ が 表示 され て し まう 
場合 が ある こと が 確認 され まし た 。 詳 細 に つい て は Hacrgmedig HomWS1Ue サポ ー ト セン ター に て ご 確認 いた だ け ま す 。 


Macromedia Web Players 
プ Hacromedia FloshP 』WW Pecromedio Shockwave Plauer 
ゅ その他 の web Plguer 
Macromedia 製品 


Do 
と ⑮⑱ 
Torwar 、 Extensions 





4 Macromedia 社 の Web サ イト (http://www.macromedia.comjp/downloads)。 こ こ か ら Shockwave 
Player が ダウ ン ロ ー ド で きま す 
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サウ ンド に は さま ざま な ファ イル 形式 が あり ます が 、Web ペー ジ で サポ ー ト され る 代表 的 な フ 
ァイル に は 次 の よう な も の が あり ます 。 こ こ は 主 な サウ ンド 形式 の 紹介 に と ど ま っ て いま す の で 、 
それ ぞ れ の ファ イル 形式 の 詳細 や 作成 方 法 に つい て は 専門 書 を 参考 に し て くだ さい 。 

また 、 サ ウン ド フ ァイル も ほか の 素材 と 同様 に Web 上 で も 数 多く 配布 され て いま す 。 そ うい っ 
た ファ イル を 利用 し て みる の も よい で し ょ う 。 利用 に あたっ て は 各 サ イト の 規定 に し た が っ て く 
だ さい 。 ま た 著作 権 の 侵害 に あたら な いか どう か に も 十分 注意 し まし ょ う 。 


WAV 「.wav」 
Windows で 標準 的 に 使わ れる ファ イル 形式 で す 。 


AIFF「.aif」 
Macintosh で 標準 的 に 使わ れる ファ イル 形式 で す 。 


AU「.au」 
UNIX で 標準 的 に 使わ れる ファ イル 形式 で す 。 Windows と Macintosh の 両方 で 利用 する こと 
が で きま す 。 


MP3「.mp3」 
MPEG-1 Audio Layer3 の 略 で 、 国 際 的 な 動画 の 圧縮 規格 の MPEG-1 で 利用 され る サウ ンド 
圧縮 形式 の ひと つ で す 。 音質 の 劣化 を 抑え な が ら 高 い 圧 縮 率 を 実現 で きる 点 が 特徴 で す 。 


RealAudio「.rm」 

Realnetworks 社 (http://WwwJjp.real.Com/) に よる 、 ス トリ ー ミ ング 再生 で 有名 な 形式 で 
す 。 デ ー タ の 一 部 を 読み 込む と 同時 に 再生 を 開始 する た め 、 時 間 が か か ら ず ファ イル サイ ズ の 心 
配 も あり ませ ん 。 同社 の RealPlayer で 再生 で きま す 。 
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@ Web ペー ジ に サウ ンド を つけ る 方 法 





サウ ンド を Web ペー ジ に 組み 込む に は 、 い くつ か の 方 法 が あり ます 。 


<a href="url"> -- </a> 
リン ク を クリ ッ ク す る と 、 関 連 づ けら れ た プラ グイ ン や ヘル パー アプ リケーション が 起動 し て 
サウ ンド を 再生 し ます 。 


<embed src="url"> 

プラ グイ ン を 利用 し て サウ ンド を 再生 し ます 。 

HTML4.01 で は <object> タグ (p.281 参照 ) を 利用 する こと に な っ て いま す が 、<object> 
タグ を サポ ー ト する ブラ ウザ が まだ 少な いた め 、<embed> タグ の ほう が 広く 利用 され て いま す 。 


<bgsound src="url"> 
Internet Explorer が 独自 に 拡張 し た 機能 で 、Netscape は 対応 し て いま せん 。Dp.278 を 参照 
し て くだ さい 。 


⑯ サウ ンド 掲載 の 注意 


Web ペー ジ を 利用 する ユー ザー が 、 サ ウン ド や その ペー ジ の 閲覧 を 楽し め る よう 気 を 配り た い 
点 が あり ます 。 何事 も 同じ で す が 、 サ ウン ド に つい て も ユー ザー が 再度 訪問 を し た く な る よう な 
ペー ジ を 作り た いも の で す 。 サ ウン ド の 効果 的 な 使い 方 を 研究 し て みて くだ さい 。 


ファ イル サイ ズ を 小さ くす る 
ユー ザー の 通信 環境 が 必ず し も 快適 で ちる と は 限り ませ ん 。 デ ー タ の サイ ズ は な る べく 小さ く 
する よう 心がけ まし ょ う 。 


ファ イル の 形式 と サイ ズ を 明記 する 
用 意 し た ファ イル が 相手 の 環境 に 対応 し て いる か どう か 、 ダ ウン ロー ド に どの くら い の 時 間 が か 
か る か 、 あ ら か じ め わ か る よう に ファ イル 形式 と その サイ ズ を 書き 添え て お いた ほう が 親切 で す 。 


聴く こと が で き な い 場合 へ の 配慮 を する 

何ら か の 制約 か ら 、 サ ウン ド を 再生 し た り 聴い た りす る こと が で き な い 場合 も わり ます 。 内 容 
を 説明 する テキ スト を 添え て お く な どの 配慮 も 必要 で す 。 

また 、 再 生 で きる 環境 を 制限 する よう な 組み 込み 方 、 デ ー タ 形式 も 好ま し いも の で は あり ませ ん 。 


サウ ンド ・ デ ー タ を 使い た い 
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自動 演奏 は な る べく 避け る 

ペー ジ を 開く と 同時 に 自動 的 に サウ ンド を 再生 する ペー ジ が あり ます が 、 会社 や 学校 を は じ め 
周囲 を 気 に する 場 で 閲覧 し て いる ユー ザー に は 、 迷 惑 に な る こと も あり ます 。 な る べく な ら こ の 
よう な ペー ジ の 設定 は 避け 、 ユ ー ザ ー が オン プ オ フ を 選択 で きる よう に し まし ょ う 。 


」 

」 

「 
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ADVANCED TECHNIQUE 





2000 年 1 月 に XHTML (eXtensible HyperText Markup Language) 1.0 が 、 続 いて 
2001 年 3 月 に は XHTML1.1 が W3C か ら 勧 告 さ れ ま し た 。 この XHTML は 、HTML の 機能 を 
XML (eXtensible Markup Language) の 仕様 に し た が っ て 定義 し 直し た 、HTML の 次 期 バ 
ー ジ ョ ン と いえ る も の で す 。Web ペー ジ の 記述 言語 と し て HTML が 広く 普及 し 、 定 着 し て いる 
中 、 な ぜ こ の よう な 変更 が 加え られ た の で し ょ うか が 。 


HTML か ら XHTML へ 

HTML は 、 SGML (Standard Generalized Mark-up Language) と いう 国際 標準 規格 に 
基づい て 作ら れ た 言語 で す 。SGML 自体 は 複雑 な 仕様 に な っ て いま す が 、 そ こ か ら 作 られ た 
HTML は 非常 に 簡単 な 仕組 み で あり 、 扱 いや すい 言語 で あっ た た め 、 急 速 に 普及 し まし た 。 し か 
し 同時 に 、 こ の 簡単 で 扱い や すい と いう 点 が 問題 を 生む 原因 で も あっ た と いえ ます 。 た と えば 、 
ブラ ウザ メー カー が 独自 に 拡張 を 行っ た り 、 ユ ー ザ ー (Web ペー ジ 制 作者 ) の 側が レイ アウ ト の 
た め に タグ を 意図 的 に 誤用 する な ど 、「 文 書 の 構造 を 定義 むる マー クア ッ プ 言語 」 と いう 本 来 の 姿 
と は 異な っ た 方 向 へ 発展 し て し まっ て いま す 。 ま た 、 実際 に HTML で Web ペー ジ を 作成 し て み 
る と わか り ま す が 、HTML は 数 多く の 複雑 な デー タ を 処理 する に は 向い て いま せん 。 WWW の 発 
展 と と も に いく つも の 問題 が 指摘 され 、 解 決 策 が 求め られ る よう に な っ た の で す 。 

HTML4.0 は この よう な 状況 に お いて 、 文 書 の 体 哉 に 関わ る タグ を 廃止 し 、HTML 本 来 の 目的 
に の み 専 念 し よう と いう 方 針 を と っ た バー ジョ ン で す 。HTML4.0 は 多少 の 修正 を 加え られ て 
HTML4.01 と な り ま し た 。 さ ら に この HTML4.01 を XML の 仕様 で 定義 し 直し て 勧告 され た の 
が XHTML1.0 な の で す 。 

XML も また SGML の 仕様 に よっ て 定義 され た も の で す が 、「extensible] の 名 の 通り 、 既 存 
の タグ し か が 利用 する こと が で き な い HTML と は 違っ て ユー ザー 側 で 独自 の タグ を 定義 で きる と い 
う 特 色 を 持っ て いま す 。XHTML へ の 移行 の 目的 は 、HTML に この XML の 拡張 性 や 汎用 性 を 導 
入 す る こと に あり まし た 。 


XHTML の 利点 と 将来 性 

XML を ベー ス と し た XHTML で は 、 要 素 や 属性 を 新た に 定義 し て 利用 する こと が 可能 に な り 
ます 。 ま た モジ ュー ル 化 と いう 概念 が 導入 され る こと で (XHTML1.1)、 文 書 の 構成 要素 を 小さ 
な 単位 に 分 け 、 必 要 に 応じ て それ ら を 組み 合わ せ て 使う こと いっ た こと も で きる よう に な り ま す 。 
この よう に し て 、XHTML で は 従来 の HTML より も より 適切 に 文書 デー タ が 扱え る よう に な る と 
期待 され て いま す 。 

Web ペー ジ の 記述 言語 と し て は まだ HTML が 主流 で す が 、XHTML へ の 移行 を 考え 始め て も 
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早 す ぎる と いう こと は あり ませ ん 。HTML が SGML を ベー ス に し て いる 一 方 、 XHTML は XML 
を ベー ス に し て いる と いう 違い が あり ます が 、XHTML は HTML の 機能 を XML の 仕様 で 定義 し 
な お し た も の で すか ら 、HTML で 定義 され て いる 要素 や 属性 を その まま 利用 で きま す 。 ま た 、 記 
述 の 仕方 も 、 基 本 的 に 大 きく 異な る も の で は あり ませ ん 。 た だ し 、 従 来 の HTML と の 互換 性 を と 
る た め に 、 い くつ か の 点 で 注意 する 必要 が あり ます 。 


@⑯ HTML4.01 と の 違い 


XHTML を 使っ て 文書 を 作成 する 場合 の 、HTML と XHTML と の 主 な 違い を 簡単 に まとめ て お 
きま す 。 


XML 宣言 
文書 の 文字 コー ド と し て デフ ォ ル ト の UTF-8、UTF-16 以外 の も の を 使用 する 場合 に は 、 文 書 
の 先頭 に 次 の XML 宣言 を 記述 し ます 。UTF-8、UTF-16 を 使用 する 場合 は 「encording=」 以 
下 を 省略 し て も よく 、XML 宣言 その も の を 省略 する こと も で きま す 。 
<?xml version="1.0" encording=" 文 字 コ ー ド " ?> 


文書 型 宣言 
XHTML1.0 に は HTML4.01 と 同様 に 3 種類 の DTD が 用 意 さ れ て いま す (Dp.16 参照 )。 こ の 
XHTML1.0 に し た が っ て 文書 を 作成 する 場合 の 文書 型 宣 言 は 次 の よう に な り ま す 。XML 宣言 に 
つづ いて 適切 な も の を 記述 し て くだ さい 。 
Strict DTD 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
Transitional DTD 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://Www.w3.org/TR/xhtml1/DTD/xhtml1-transitionaldtd"> 
Frameset DTD 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://Wwww.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 


名 前 空間 
XML 文書 で は 、 複 数 の 文書 型 定義 を 使用 し て ほか で 定義 され て いる 要素 や 属性 を 組み 込む こ と 
が で きま す が 、 そ うし た 場合 に 同じ 名 前 が 衝突 し て し まう 恐れ が あり ます 。 そ の 回 避 策 と し て 
「 名 前 空間 (ネー ム ス ペ ー ス )」 と いう 手段 を 利用 し ます 。 XHTML 文書 を 作成 する 場合 は 、html 
要素 に 次 の よう に 記述 する こと で 、 当 該 文 書 で 使わ れる 要素 名 や 属性 名 が XHTML の 名 前 空間 に 
属し て お り XHTML の 規則 に し た が っ て いる こと を 示し ます 。 
<html xmlns="http://www.w3.org/ 1999/xhtml"> 


。 *HTML 311 


文書 は 整形 式 で な けれ ば な ら な い 

整形 式 と は 、 簡 単に いえ ば 、 開 始 タ グ と 終了 タグ が あり 、 正 し い 入 れ 子 関係 に な っ て いな けれ 
ば な ら な いと いう こと で す 。 正しく 入れ 子 関係 に な っ て いな く て は な ら な い の は HTML で も 同じ 
で す が 、 こ れ ま で は ブラ ウザ が 寛 容 に 処理 し て 表示 で き て いた よう な 誤り も 、XHTML で は エラ 
ー の 原因 と な る た め 、 注 意 し て 記述 し な けれ ば な り ま せん 。 


要素 名 、 属 性 名 は 必ず 小文字 で 書く 

HTML で は 大 文字 と 小文字 の 区 別 は な く 、 ど ちら を 利用 し て も 問題 は あり ませ ん で し た 。 
XML で は 大 文字 と 小文字 は 区 別 さ れ 、 た と えば LI と は 別 の 要素 名 と し て 認識 され ます 。 
XHTML の 仕様 で は すべ て の 要素 名 や 属性 が 小文字 で 定義 され て いる た め 、XHTML 文書 を 作成 
する 場合 に は 要素 名 や 属性 を すべ て 小文字 で 記述 し な けれ は な り ま せん 。 


タグ は 省略 で き な い 

XHTML で は 開始 タグ と 終了 タグ の 両方 を 必ず 書か ね ば な り ま せん 。HTML で は 開始 タグ と 終 
了 タ グ の 両方 が 省略 で きた 要素 (html な ど ) や 、 終 了 タ グ が 省略 で きた 要素 (p、li な ど ) も 、 
XHTML で は すべ て 開始 タグ と 終了 タグ の 両方 を 記述 し な けれ ば な り ま せん 。 


属性 値 は つね に 引用 符 で 囲む 
HTML で は 属性 値 を 引 用 符 で ("や ') 囲ま ず に 記述 する こと も 認め られ て いま し た が 、 
XHTML で は すべ て の 属性 値 を 引用 符 で 囲ま な けれ ば な り ま せん 。 


属性 は 最小 化 で き な い 

HTML で は compact、selected の よう に 属性 名 を 省略 し て 記述 する こと も 認め られ て いま 
し た が 、XHTML で は こう し た 表記 の 最小 化 は 認め られ ませ ん 。 必 ず compact="compact'"、 
selected="selected" の よう に 「 属 性 名 =" 値 "] の 形式 で 書く 必要 が あり ます 。 


空 要素 も 閉じ る 

HTML で は 内 容 を 持た な い 空 要素 を <br><hr> の 形式 で 書い て いま し た が 、XHTML で は 
<br/> (要素 名 の 後ろ に 「/] を 入れ る ) か 、<hr></hr> (終了 タグ を 書く ) の いずれ か の 形式 に 
し な けれ ば な り ま せん 。 な お 、 旧 バー ジョ ン の ブラ ウザ で は <br/> の 形式 が 正しく 表示 され な い 
場合 が あり ます 。 そ の た め 、 そ うし た ブラ ウザ と の 互換 性 を 考え て <br /> の よう に 、「/| の 前 に 
スペ ー ス を ひと つ 置 いて 記述 し た ほう が よい で し ょ う 。 ま た 、< 要 素 名 /> (< 要素 名 />) と < 要 
素 名 ></ 要 素 名 > で は 表示 が 異な る ブラ ウザ も あり ます 。 
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Script 要素 と style 要素 に つい て 

XHTML で は 「<」 の 文字 は すべ て タグ を あら わす 記号 と みな され 、 ま た 、 コ メン ト 扱 いし た 内 
容 は 無視 され る 仕様 に な っ てい ます 。 そ の た め 、 文 書 内 に スク リプ ト や スタ イル シー ト を 組み 込む 
場合 に は 、「<![CDATA[]| と >」 を 使っ て 次 の よう に 記述 する こと に な り ま す 。 


<script type="text/javascript"><![CDATA[ 
2 記 ド 

kpe 

<style type="text/css"><![CDATA[ 
2 イル 


]]-</style> 
な お 、 代 替 策 と し て 外部 スク リプ ト や 外部 スタ イル シー ト の 使用 が 推奨 され て いま す 。 


識別 子 は name 属性 の 代わ り に id 属性 を 利用 する 

ある 要素 に 固有 の 名 前 を 指定 する 場合 、 従 来 の HTML で は name 属性 を 使用 し て いま し た が 、 
HTML4.0 か ら 新しく id 属性 が 導入 され まし た 。 name 属性 は 今後 廃止 され る 予定 に な っ て お り 、 
XHTML で は 、 代 わり に id 属性 で 指定 する よう に 定義 され て いま す 。 し か し 、 旧 バー ジョ ン の ブ 
ラウ ザ と の 互換 性 を 考え て 、name 属性 も 併記 する 方 法 も あり ます 。 こ の 場合 、id 属 性 と name 
属性 に は 同じ 値 を 指定 し て くだ さい 。 


XHTML に つい て 詳し く は 下記 URL を 参照 し こく だ さい 。 
http://www.w3.org/MarkUp/ 
http://www.w3.org/TR/xhtml1/ 


POOLKIIIIIKEKKKILIALAAKRRRKAKKKKAKAKKRRKKKXXYRRRYI OILIEISIEIRIKSY】 OIL は XX】 
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一 般 に イン ター ネッ ト の Web ページ は HTML (Hyper Text Markup Language) を 用 いて 
記述 し 、 閲 覧 者 側 で は この HTML で 書か れ た ファ イル を Internet Explorer や Netscape 
(Navigator) を は じ め と する ブラ ウザ を 使っ て 表示 させ る と いう し くみ に な っ て いま す 。 

一 方 、! モ ー ド 用 の Web ペー ジ を 作成 する 場合 は 「i モ ー ド 対応 HTML」 を 使用 し ます 。 こ れ 
は 携帯 電話 や PDA (個人 用 携帯 情報 端末 ) な ど で Web ペー ジ を 利用 する た め に 定義 され た 
CompactHTML を も と に 、NTT ドコ モ が 独自 に 規定 し た 1 モー ド 専 用 の ペー ジ 記 述 言 語 で す 。 
CompactHTML は HTML2.0、3.2、4.0 の サブ セッ ト と し て 一 部 の 要素 や 属性 を 省 い た も の で 
すか ら 、 そ の CompactHTML を 基盤 と し て いる モード 対応 HTML も 、HTML の 知識 が あれ 
ば 容易 に 扱う こと が で きま す 。 | モード 対 応 HTML に は 現在 、1.0、2.0、3.0 の 3 つの バー ジョ 
ン が あり ます 。 バ ー ジ ョ ン が あがる に つれ て 対応 する 機種 が 限定 され ます が 、i モ ー ド 対応 
HTML1.0 を 利用 すれ ば 全 機 種 で 動作 させ る こと が で きま す 。 

i モ ー ド 対応 HTML の 詳細 は 、 付 録 の 「i モ ー ド 対応 HTML 一 覧 」 を 参照 し て くだ さい 。 


⑱ ji モード 対応 HTML と HTML の 違い 


すでに 述べ た よう に i モ ー ド 用 の ホー ムペ ー ジ は 、「i モ ー ド 対応 HTML」 を 使っ て 記述 し ます 。 
i モ ー ド 対応 HTML は HTML の サブ セッ ト と し て 位置 づけ られ て お り 、HTML の 知識 が ほぼ そ 
の まま 活用 で きる た め 、 こ こ で は 一 般 的 な PC 向け Web ペー ジ を 作成 する 場合 と は 異な る 点 の み 
に 絞っ て 、 簡 潔 に 説明 し ます 。 そ の 他 Web ペー ジ を 作成 する うえ で の 基本 的 な 知識 に つい て は 
P.12 一 p.15 を 参考 に し て くだ さい 。 


文字 

文字 コー ド は 、SHIFT-JIS の み 対 応 し て いま す 。 

また 、PC 用 の Web ペー ジ と は 異な る 大 き な 特 徴 と し て 、i モ ー ド で は 半角 カタ カナ が 使え ま 
す 。 さ ら に 、 あ ら か じ め 用 意 さ れ た 17/ 種類 の 絵文字 を 利用 で きま す 。 絵文字 に つい て は 付録 の 
ii モ ー ド 用 絵文字 一 覧 ] を 参照 し こく だ さい 。 


画像 の ファ イル サイ ズ 

最大 94 X 72 ドッ ト ま で に 収め る よう 推奨 され て いま す 。 

1 画面 に 表示 させ る ファ イル は 5KB 未満 と な っ て いま す が 、 こ れ は 表示 され る 部 分 だ け で な く 、 
その 他 フ ァイル に 含ま れる タグ の 分 も 含め た サイ ズ で す 。 推奨 ファ イル サイ ズ は 2KB で す の で 、 
ここ か ら 表 示 用 の タグ を 除い た 分 量 が 、 利 用 可能 な 画像 サイ ズ と いう こと に な り ま す 。 


画像 の ファ イル 形式 
i モ ー ド で 利用 で きる 画像 形式 は GIF 形式 と JPEG 形式 (一 部 対応 機 の み ) で す 。 対 応 画像 の 
詳細 は 下 の 表 の よう に な っ て いま す 。 画像 に つい て は p.286 も 参照 し こく だ さい 。 


ノン イン ター レー ス GIF 9 1 9 

! イ ンタ ー レ ー ス GIF 較 e 9 ! XP 
SS 

: ア ニメーション GIF : O 〇 ! X"} :・1 ノン イン ター レー ス GIF と し て 表示 
HPEG ーーー て に ーーーーーーー て ーーー! 2 カラ ー 対 応 拉 種 のみ 


- 。 *3 JPEG 対 応 機種 の み 


⑱ モー ド 対 応 HTML で で きる こと 





リン ク を 利用 し て 電話 を か ける こと が で きま す 。 下 の 例 で は リン ク を クリ ッ ク す る と 01- 
2345-6789 へ 電話 を か け ます 。 
<a href="tel01-2345-6789"> 一 </a> 


ダイ レク トキ ー を 設定 する こと が で きま す 。 「0 一 9」、「"」、「# が 利用 で きま す が 、「」、「 電 
が 利用 で き な い 端 末 も あり ます 。 下 の 例 で は 携帯 電話 の 「1」 ボタ ン を 押す と 指定 し た URL へ リ 
ンク し ます 。 

<a href="http://www.abc.co.jp/tko.htm" accesskey="1">ー- </a> 


i モ ー ド 用 Java (| アプリ ) を ダウ ン ロ ー ド する こと が で きま す (対応 機 の み )。 
<object> タグ の id 属性 に は <object> タグ の ID を 、data 属性 に は ADF ファ イル (i ア プリ 
の 設定 情報 が 記述 され て いる ファ イル ) の URL を 指定 し ます 。type 属性 の 値 は 常に 
application/x-jamm で す 。 そ し て <a> タグ の ijlam 属性 に <object> タグ で 指定 し た ID を 設定 し 
て 呼び 出し 、href 属性 で Java 非 搭載 機種 用 メッ セー ジ を 記述 し た HTML の URL を 記述 し ます 。 
下 の 例 で は 、 リ ンク を クリ ッ ク す る と sample.jam で 指定 し た 1 アプ リ が ダウ ン ロ ー ド され 、 
Java 非 搭載 機種 用 で は error.html の 内 容 が 表示 され ます 。 
<object declare id="imode1" data="sample.jam" type="application/x-jam "> 
</object> 
<a ijam=" 質 mode1" href="error.html">i ア プリ を ダウ ン ロ ー ド </a> 


リン ク を 利用 し て 電話 帳 登録 を 行う こと が で きま す (対応 機 の み )。 

<a> タグ の 属性 と し て 、telbook 属性 で は アド レス 帳 で の 表示 上 の 名 前 を 20byte まで 指定 
(絵文字 は 使用 不可 ) し 、kana 属性 で アド レス 帳 で 検索 用 の 半角 の 名 前 を 18byte まで 指定 ( 半 
角 文 字 の み )、emalil 属性 で アド レス 帳 で の メー ル ア ド レス を 50byte まで 指定 で きま す 。 

次 ペー ジ の 例 1 で は 、 リ ンク を クリ ッ ク す る と 01-2345-6789 へ 電話 を か ける と と も に 、「 株 
式 会 社 ア ンク 」「 ア ツク 」 「xxx@docomo.ne.jp] の 情報 が 電話 帳 に 登録 され ます 。 
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例 2 で は リン ク を クリ ッ ク す る と xxx@docomo.ne.jD へ の メー ル 送 信 画 面 が 開く と と も に 、 
「 株 式 会 社 翔 泳社 ] 「se」 の 情報 が 電話 帳 に 登録 され ます 。 
例 1 <a href="teE:01-2345-6789" telbook=" 株 式 会 社 ア ンク " kana="72" 
email="xxx(@docomo.ne.jD"> 
例 2 <a href="mailto:xxx(②docomo.ne.jp" telbook=" 株 式 会 社 甚 泳社 " kana="se"> 


メー ル 送 信 画 面 を 起動 し 、 サ ブ ジ ェクト と 本 文 の 初期 設定 を 行う こと が で きま す (対応 機 の み )。 
「mailto: メ ー ル アド レス 」 に 続け て 、? と 「Subject=] で サブ ジェ クト 名 ( 題 面 )、& に 続け 
て 「body=」 で 本 文 を 記述 し ます 。 
下 の 例 で は 、 リ ンク を クリ ッ ク す る と xxx@docomo.ne.jD へ の メー ル 送 信 画 面 が 、 サ ブ ジ ェ 
クト 「Hello」、 本 文 「Please mail me」 が 記入 され た 状態 で 開き ます 。 
<a href="mailto:xxx(@docomo.ne.jp?subject=Hello&body=Please mail me"> 


⑯ 全 機 種 対応 の 画面 を 作成 する 目安 ・ 基 準 


携帯 電話 の 機種 は 数 多く 、 ま た より 性 能 の 良い 新しい 機種 も 続々 と 登場 し ます 。 し か し 、 ペ ー ジ 
を 見 る 人 が すべ て 最新 の 機種 で アク セス し て くる わけ で は あり ませ ん 。 そ の た め モード 用 の Web 
ペー ジ を 作る 際 に は な る べく 多く の 環境 で 問題 な く 表示 で きる よう に 気 を 付け た いも の で す 。 

現在 の と ころ 、NTT ドコ モ が 提示 する どの 機種 で も 問題 な く 表 示 で きる Web ペー ジ の 基準 を 
大 きく まとめ る と 、 次 の よう に な り ま す 。 


テキ スト 表示 横 全角 8 文字 (半角 時 は 16 文字) x 縦 6 行 。 

画像 モノ クロ 2 階 調 の GIF 形式 で 、 サ イズ は 最大 96 X 72 ドッ ト 、5KB 以内 に し ま 
す 。 カ ラー 画像 を 使用 する 場合 も 同様 に 5KB 以内 と な り ま す 。 

画面 の 容量 1 画面 が 5KB 未満 に な る よう に し ます (NTT ドコ モ で は 2KB 未満 を 推奨 )。 こ 
の 5KB は 、HTML ファ イル だ け で な く 、 同 じ 画 面 に 表示 され る 画像 ファ イル を 
含め た サイ ズ を 指す こと に 注意 し て くだ さい 。 


[ し く は MOOKMHHHOMCHUKHIUHIUCHKUYY 


1 モー ド 対 応 HTML に つい て 詳し く は NTT ドコ モ の Web ページ を 参照 し こく だ さい 。 
http://www.nttdocomo.co.jp/p_s/1imode/ 
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携帯 電話 に よる イン ター ネッ ト へ の 接続 サー ビス は 、 各 社 が ドコ モ の 1! モ ー ド に 続い て それぞれ 独自 に 
対応 を は じ め 、 す で に 多く の ユー ザー に 利用 され て いま す 。 基本 的 に Web ペー ジ の 閲覧 と メー ル の 送受 
信 が メイ ン サ ービス と な っ て いる 点 は 各社 共通 し て いま す が 、 採 用 する 規格 が 異な っ て いる た め 、 ひ と つ 
で すべ て の 機種 を カバ ー す る 携帯 電話 用 WWebD ペー ジ を 用 意 す る こと は 難し いと いう の が 現状 で す 。 
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1 モー ド 対 応 HTML 


ADVANCED TECHNIQUE 





Web ペー ジ を 記述 する HTML は 、 文 書 の 論理 的 な 構造 を コン ピュ ー タ に 知ら せる た め に 開発 

され た 言語 で す 。 し か し 実際 は 、Web の 発展 に と も な い 、 色 や フォ ント サイ ズ の 指定 、 レ イア ウ 
ト の た め の テ ー ブ ル の 利用 な ど 、 文 書 の 体裁 、 つ まり 見 栄え まで も 定義 むせ る よう に な っ て いき ま 

し た 。W3C で は この 状況 を 改め る た め 、 構 造 に 関す る 指定 と 体 哉 に 関わ る 指定 と を 分 離さ せ 、 
HTML の 機能 で は な い 体裁 の 制御 に つい て は 別 の 方 法 を 導入 し よう と 考え る よう に な り ま し た 。 
こう し た 姿勢 の も と に 生み 出さ れ た の が スタ イル シー ト の 概念 で す 。 

W3C は 1996 年 12 月 に CSS1 (Cascading Style Sheets Level 1) を 勧告 し 、Internet 
Explorer 3.0 と Netscape Navigator 4.0 が この 技術 を 導入 し は じ め ま し た 。 そ の 後 1998 年 
5 月 12 日 に は 次 の 規格 で ある CSS2 が 出さ れ 、 現 在 で は CSS3 の 規格 が 検討 され る まで に な っ 
て いま す 。 


⑯ 基本 の 書式 


スタ イル シー ト の 基本 的 な 書式 は 次 の よう に な り ま す 。 


PP FR 時 


h1 {color : yellow } 


この よう に 、 ス タイ ル シ ー ト は 「" セ レク タ " の "属性 "を " 値 " に する 」 と いう 形 で 設定 し 、 
HTML 文書 に 組み 込ん で いく も の で す 。 

この 例 で は h1 要素 (<h1> タグ ) に 対し て 色 を 黄色 に する よう 指定 し て いま す 。 こ の スタ イル 
を 設定 し た 文書 で は h1 要素 が 出 て きた 場合 、 そ の 範囲 は 黄色 で 表現 され る こと に な る の で す 。 

つま り 、 セ レク タ と は スタ イル を 適用 させ る 対象 で す 。 属 性 と 値 に は 、 セ レク タ に 対し て どの 
よう な 指定 を する か 、 指定 する スタ イル の 種類 と その 具体 的 な 値 を 記述 し ます 。 

で は 、 前 述 の 例 を 使っ て 実際 に 簡単 な ソー ス を 書い て み ま し ょ う 。 





<html> 


<head> 
<title> スタ イル シー ト の 基本 の 書式 </Hitle> 
<Style type="text/css"> 
<!-- 
h1 {color:blue: 
font-style:italic } /* h1 要 素 を ブル ー の イタ リッ ク 体 に 設定 */ 
ーー テニ 
</style> 
</head> 
<body> 
<h1> スタ イル シー ト </h1> 
<h2> スタ イル シー ト と は </h2> 
<D テ > 
Web ペー ジ を 記述 する HTML は 、 文書 の 論理 的 な 構造 を …… 
</p> 
</body> 
</html> 














当 スタ イル シー ト の 基本 の 書式 - Micro 
カイル) 編集) 表示 お 気に入り ⑳ ツー ル ①D ヘル プ ⑪ 


の ・ の 9 回 還る の ws 表 pw0 季 の の 人 ラ - 回 


ズ タ プ ルン シー ム 


スタ イル シー ト と は 
Web ペ ー ジ を 記述 する HTML は 、 文書 の 論理 的 な 構造 を 





文書 中 の h1 要素 (<h1> タグ で 囲ま れ た 範囲 ) が 、 ブ ルー (color:blue) の イタ リッ ク 体 
(font-style:italic) で 表示 され て いま す 。 ま た /* */ は コメ ント の 部 分 で す 。 

<!-- と --> で スタ イル の 設定 個所 全体 を コメ ント アウ ト し て 、 ス タイ ル シ ー ト に 対応 し て いな い 
ブラ ウザ に 対し て は 、 そ の 部 分 が その まま 表示 され る の を 防ぎ ます 。 

スタ イル シー ト は この よう に 設定 し て いき ます 。 


1 間 和 R2E033088 間 3 


= で で ーーー 





⑯ クラ ス と ID セレ クタ 


先 の 例 で は セレ クタ は タグ で し た が 、「 ク ラス 」 や 「ID」 と いう 手段 を 利用 する 方 法 も あり 、 こ 
れ ら に よっ て 同じ タグ の 特定 部 分 や 複数 の タグ な ど 、 任 意 の 範囲 に 柔軟 に スタ イル シー ト を 適用 
する こと が で きる よう に な り ま す 。 


クラ ス に よる セレ クタ 
特定 の スタ イル に 名 前 を つけ て 定義 むせ る も の で す 。 ピ リオ ド (.) を 前 に つけ て 設定 し 、 各 タグ 
の class 属性 で 指定 し ます 。 


要素 名 . ク ラス 名 
ある 要素 の 中 で この クラ ス が 指定 され た 要素 に の み 、 ス タイ ル を 適用 し ます 。 





<style type="text/css"> 
p.text1 {color: red} 


</style> 


<h1 class="text1"> ス タイ ル シ ー ト </h1> 
<P class="text1"> ス タイ ル シ ー ト と は </p> 











馬 ウラ スヤ セレ クタ ーー 東 系 名 クラ ス 名 - Microsoft Internet Explorer 


カイル 纏 集 E) 表示 お気 に 入 D⑱⑯ ツー ル ① へ ルプ ⑪ 


GR の 同人 の の we 安 moo の zo の > 四 ・ 軸 
スタ イル シー ト 





これ は p 要素 に 対し て text1 と いう クラ ス を 適用 する 設定 で す 。 文書 中 text1 と いう クラ ス 名 
が 指定 され た D 要素 の 範囲 だ けが 、 赤 (color:red) で 表示 され ます 。 同 じ text1 と いう クラ ス 名 
を 持っ て いて も 、 要 素 が 違う た め h1 要素 に は スタ イル が 適用 され ませ ん 。 
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- ク ラス 名 


要素 は 特定 せ すず 、 そ の クラ ス 名 が 指定 され た 要素 に 対し て スタ イル を 適用 し ます 。 ど の 要素 に 
対し て も 指定 で きる 汎用 の クラ ス で す 。 


<style type="text/css"> 
-text1 {color:red} 
style> 


<h1 class="text1"> ス タイ ル シ ー ト </h1> 
<P class="text1"> スタ イル シー ト と は </p> 





アイ ル ( 上 編集 (E) 表示 お 気に入り (⑱) ツー ル ①D ルプ ⑪ 


@・ の 較 還 人 ぬ の 時 宮 5mOp 欠 ケ の の の ・ 計 回 ・』 
スタ イル シー ト 


スタ イル シー ト と は 


ここ で は text1 と いう 汎用 的 な クラ ス 名 を 設定 し て いま す 。 要素 の 指定 が な いた めど の 要素 に 
も 適用 で き 、text1 と いう クラ ス 名 を も っ た h1 要素 と p 要素 の 両方 に スタ イル が 適用 され ます 。 


スタ イル シー ト 





ID に よる セレ クタ 

ID も 特定 の スタ イル に 名 前 を つけ て 定義 むる も の で す が 、 理論 上 は 文書 中 の 1 箇所 に し か 指定 で 
き な い こと に な っ て いま す (実際 は Internet Explorer で も Netscape (Navigator) で も 複数 箇 
所 に 指定 で きる よう で す )。「#] (シャ ー プ ) を 前 に つけ て 設定 し 、 各 要素 の id 属性 で 指定 し ます 。 
クラ ス 同 様 、 要 素 を 指定 し て 定義 する 方 法 と 、 要 素 を 指定 し な いで 定義 する 方 法 と が あり ます 。 


要素 電 D 
者 D 

要素 電 り の か た ち で は 、 そ の ID が 指定 され た 要素 に 対し て の み ス タイ ル を 適用 し ます 。 一 方 
乾 D り の か た ち で は 、 ど の 要素 に 対し て も 指定 で きま す 。 










<style type="text/css"> 
Pext1 { color: blue } 
ext2 {color:red} 
</style> 


<P id="text1"> ス タイ ル シ ー ト </p> 
<P> スタ イル シー ト と は <br> 
web ペー ジ を 記述 する <span id="text2">HTML</span> は …… 





了 iDp セ し の タ - Microgoft internet Eplorer 


アイ ル () 編集 ED 表示 V) お 気 に 入 DQ) ツー ル ①D へ ルプ ⑪ 
@・② 回 還 め の ws 支 5m2D 例 の の の ・ あ 回 ・。』 


タイ ル ト 


スタ イル シー ト と は 


web ペ ー ジ を 記述 する HTML は 





ここ で は D 要 素 に 対し て の み 使 用 で きる text1 と いう ID と 、 使 用 する 要素 を 問わ な い text2 と 
いう ID を 設定 し て いま す 。text1 を ID に も つ p 要素 に text1 の スタ イル 、text2 を ID に も つ 
span 要素 に text2 の スタ イル が 適用 され ます 。 


スタ イル シー ト 





⑯ 適用 方 法 と 適用 の 優先 順位 


HTML 文書 に スタ イル シー ト を 組み 込む に は いく つか の 方 法 が あり ます が 、 基 本 と な る の は 次 
の 3 通り で す 。 
イン ライ ンス タイ ル シ ー ト 
埋め 込み スタ イル シー ト 
スタ イル ファ イル の 使用 
この ほか に ブラ ウザ が 初期 設定 と し て 持っ て いる スタ イル シー ト や ユー ザー が 定義 むす る スタ イ 
ル シ ー ト 、 ま た 「!important」 を 利用 し て スタ イル の 優先 順位 を 逆転 させ る 方 法 な ども あり ます 。 
その た め 複 数 の スタ イル が 設定 され た 場合 に どの スタ イル が 優先 され る の か 、 そ の ルー ル は や 
や 複雑 で す が 、 ペ ー ジ 制作 者 の 立場 か ら 上 記 の 3 通り の 方 法 に つい て 見 る な ら ば お お お むね 次 の よ 
うに な り ま す 。 


イシ ライ シン スタ イル シ ー ト 埋め 込み スタ イル シー ト スタ イル ファ イル の 使用 


つま り 、 同 じ タ グ に 対し て いく つか の 方 法 で スタ イル が 設定 され て いた 場合 、 タ グ に 直接 記述 
する イン ライ ンス タイ ル シ ー ト が も っ と も 優先 され る と いう こと で す 。 

この 点 を ふま えて 状況 に 応じ て 使い 分 ける こと が 、 ス タイ ル シ ー ト を 使い こなす コツ と いえ ます 。 
それ ぞ れ の 記述 方 法 優先 順位 別に みて いき まし ょ う 。 


イン ライ ンス タイ ル シ ー ト 
Style 属性 (p.6 参照 ) を 使用 し 、 タ グ に 直接 スタ イル を 記述 する 方 法 で す 。 た と えば 次 の よ 
うに な り ま す 。 
<h1 style="color:bule"> 見 出し 1</h1> 


この 場合 、 指 定 し た タグ の 範囲 に のみ 、 ス タイ ル が 適用 され ます 。 


埋め 込み スタ イル シー ト 

<style> と </style> タグ (p.272 参照 ) の 間 で スタ イル を 定義 し 、 こ れ を <head> と 
</head> タグ の 間 に 配 置 する 方 法 で す 。 記述 し た ペー ジ 内 で の み 有 効 と な り ま す 。 ペー ジ ご と に 
スタ イル を 適用 し た い 場 合 な ど に 便利 な 方 法 で す 。 具体 的 な 記述 方 法 は 「 基 本 の 書式 ] (p.318) 
の 例 を 参照 し こく だ さい 。 
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スタ イル ファ イル の 使用 一 <link> タグ に よる 読み 込み 

HTML 文書 と は 別に スタ イル を 設定 し た スタ イル ファ イル (拡張 子 *.css) を 用 意 し 、 こ れ を 
<link> タグ (D.34 参照 ) で 読み 込む 方 法 で す 。 

これ は 複数 の HTML 文書 に 同じ スタ イル を 適用 し た い 場 合 な ど に 便利 な 方 法 で す 。 ま た サイ ト 
の 保守 管理 が 比較 的 容易 だ と いう メリ ッ ト も あり ます 。 

た と えば 次 の よう に な り ま す 。 


sfyle.css の SOURCE 





body {background-color:green} 
h1 {color:blue: 
background-color:white} 





<html> 

<head> 

<title= スタ イル ファ イル の 使用 一 - Ink</title> 

<iink re に "stylesheet" href="style.css" type="text/css"> 
</head> 

<body> 

<h1> スタ イル シー ト </h1> 

<h2> ス タイ ル シ ー ト と は </h2> 

<D テ > 

Web ペー ジ を 記述 する HTML は 、 文 書 の 論理 的 な 構造 を …… 
</P> 

</bodV> 

</html> 











公 スタ イル ファ イル の 使用 一 一 link - Microsoft Internet Explorer 
アイ ル (P) 編集 EC) 表示 び ) お 気 に 入 D(⑩ ウー ル ① へ ルプ ⑪ 


OR・ の 回 回 人 @ の we 支 mo の zo の ら - > 四 ・ 








人 る 別 ファ イル (style.css) で 定義 し た スタ イル が 適用 され ます 








324 


スタ イル ファ イル の 使用 一 @import に よる 読み 込み 

HTML 文書 と は 別に スタ イル を 設定 し た スタ イル ファ イル (拡張 子 *.css) を 用 意 し 、 こ れ を 
「@import」 で 読み 込む 方 法 で す 。「@import] は 、<style> タグ と </style> タグ の 間 に 記述 し 、 
同時 に ほか の スタ イル も 記述 する 場合 に は 、「@import」 の 後に 記述 する よう に し て くだ さい 。 た 
だ し 、Netscape Navigator 4.x で 「@import」 を 使用 する と 、 エ ラー が 発生 する 場合 が あり ま 
す の で 、 注 意 し て くだ さい 。 


sfyle.ss の $0URCE 





body {background-color:green} 
h1 {color:blue: 
background-color:white} 








<html> 

<head> 

<title> スタ イル ファ イル の 使用 一 - @import</ せ tle> 
<stvle type="text/css"> 
<!-- 

@import url("style.css"): 
h2 { color: red } 

ーー テ > 

</style> 

</head> 

<body> 

<h1> スタ イル シー ト </h1> 
<h2> スタ イル シー ト と は </h2> 


<P> 

Web ペー ジ を 記述 する HTML は 、 文 書 の 論理 的 な 構造 を …… 
</P> 

</bodV> 

</html> 
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プア イル) 編集) 表示 お気 に 入 0@ ヘル プ ⑪ 
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^ 別 ファ イル (Style.css) で 定義 し た スタ イル が 適用 され ます 


⑯ スタ イル シー ト の メリ ッ ト と デメ リッ ト 


スタ イル シー ト を 使う と 、 構 造 と 体裁 を 分 離し て それ ぞ れ を 別 の 手段 で 表現 で きま す の で 、 体 
裁 だ け を 一 括 し て 指定 ・ 変 更 で きる よう に な り ま す 。 こ れ に よっ て サイ ト の 体裁 や 雰囲気 を 統一 
し や すく な る と と も に 、 保 守 管 理 の 手間 が 大 幅 に 軽減 され ます 。 ま た 同時 に 、 実 に 多様 で 柔軟 な 
表現 を 期待 で きる よう に な り ま す 。 

そし て W3C が 打ち 出し て いる 「 ア クセ シビ リティ 」 の 向上 が あり ます (p.336 参照 )。 ア クセ 
シビ リティ と は 、 ユ ー ザ ー が どん な 状況 に あっ て も アク セス し や すく 、 情 報 を 得 や すく する と い 
う よ う な 意味 で す 。 Web ペー ジ に アク セス し て くる ユー ザー の 環境 は 必ず し も 1 つ で は あり ませ 
ん 。 た と えば 、 ブ ラウ ザ や 通信 環境 の 問題 か ら 、 あ る い は 身体 的 な ハン ディ か ら 、 ア クセ ス す る 
こと 自体 が 難し く 、 そ れ に 対処 する た め の 特 別 な 環境 を 備え て いる 人 も いる の で す 。 ま た 、 レ イ 
アウ ト に 頼っ た 表現 を 理解 で き な い 人 も いま す 。 こ の よう な 場合 、 あ ら か じ め 文 書 の 構造 と 体裁 
を 分 離し て お け ば 、 文 書 の 構造 を 基本 と し て 、 そ の 他 の 体裁 (や 情報 自体 の 提供 方 法 。 た と えば 
視覚 に 頼ら な く て も すむ お よう 、 音声 に 変換 する な ど ) に つい て は それ ぞ れ の 状況 に 応じ た 処理 を 
行う と いっ た こと が 可能 に な る の で す 。 

この よう に さま ざま な メリ ッ ト が 考え られ る スタ イル シー ト で す が 、 同 時 に デメ リッ ト も 存在 
し ます 。 

まず 、 未 対応 の ブラ ウザ が ある と いう こと で す 。 対応 を うたう ブ ラウ ザ で も 、 完 全 に は 対応 し 
て いな い 場 合わ わり ます し 、 ブ ラウ ザ や その バー ジョ ン に よっ て も 動作 や 見 え 方 が 異な る 場合 が 
あり ます 。 こ うし た 点 か ら 、 ス タイ ル シ ー ト を 使用 する 際 に は 充分 に 注意 し 、 サ ポー ト し て いな 
い ブ ラウ ザ に 対す る 配慮 も 必要 で す 。 

この よう に 、 大 き な メ リッ ト を 持つ と 同時 に デメ リッ ト も まだ 少な く な い 状 態 に ちあ り ま す が 、 
W3C が Web ペー ジ に お ける 構造 と 体裁 の 分 離 を 打ち 出し た 現在 、 ス タイ ル シ ー ト は 正しく 
Web ペー ジ を 記述 する た め に けし て 無視 で き な い 技術 と な っ て いま す 。 

スタ イル シー ト の 詳細 は 、 本 書 姉妹 書 の 「 ス タイ ル シ ー ト 辞典 第 3 版 ] を ご 覧 くだ さい 。 








ADVANCED TECHNIQUE 





Web ペー ジ に アク セス する と ブラ ウザ の ステ ー タ スバ ー に 文字 が 流れ た り 、 ボ タン や リン ク 元 
を クリ ッ ク し た と き に アラ ー ト (警告 ) が 表示 され た りす る こと が あり ます 。 こ うし た 機能 は 
JavaScript を 使う こと で 実行 で きま す 。 

この 項 で は 、JavaScript が どの よう な も の で ある の か 、 概 要 に 絞っ て みて いく こと に し ます 。 

同様 に ペー ジ に 動き を 加え る 技術 と し て Java (次 項 参照 ) と いう も の が あり ます 。 
JavaScript と 名 前 は 似 て いま す が 、 両 者 は まっ た く 別 の も の で す の で 混同 し な いよ うに 注意 し て 
くだ さい 。 


人 @ JavaScript と は 


JavaScript は Netscape 社 が 開発 し た スク リプ ト 言 語 で す 。 開 発 当 初 は LiveScript と 呼ば れ 
て いま し た が 、 後 に JavaScript と 名 称 を 変更 し 現在 に 至っ て いま す 。 こ の JavaScript は まず 
Netscape Navigator 2.0 に 導入 され 、 そ の 後 Internet Explorer 3.0 で も 導入 され まし た ( よ 
り 正 確 に いえ ば 、Internet Explorer に 導入 され て いる の は JavaScript 互換 の JScript と いわ れ 
る も の で す )。 

Web ペー ジ は 基本 的 に HTML と スタ イル シー ト で 記述 し ます 。 し か し 、HTML や スタ イル シ 
ー ト は ペー ジ が どの よう な 構造 に な っ て いて 、 ど の よう に 表示 され る べき か を 指定 する 働き を し か 
も っ て いま せん 。 作 成 さ れ た ペー ジ は あく まで も 静 的 な も の で し た 。JavaScript を 利用 する と 、 
こう し た ペー ジ に 動き を も た せ た り 、 こ れ ま で CGI を 必要 と し て いた 処理 を ある 程度 行っ た り で 
きる よう に な る の で す 。 

JavaScript の 主 な 特徴 と し て 、 ま ず 、HTML 文書 内 に 直接 記述 で きる と いう 点 が あり ます 。 
コン バイ ル (プロ グラ ミン グ 言 語 で 作成 し た ソー スコ ー ド を コン ピュ ー タ が 理解 で きる 機械 語 に 
変換 する こと ) の よう な 作業 は 必要 あり ませ ん 。 そ し て 、 ユ ー ザ ー 側 に は JavaScript に 対応 し 
た ブラ ウザ さえ あれ ば 、OS の 種類 が 違っ て いて も (理論 上 は 、 で す が ) スク リプ ト の 実行 が 可能 
で ある と いう 点 も あげ られ ます 。 


326 issgrigt 有人 5 2 


@ JavaScript で で きる こと 


JavaScript を 使う と 何 が で きる の で し ょ うか 。Web ペー ジ で 比較 的 よく 見 か ける 使用 例 を い 
くつ か あげ て みる と 、 次 の よう に な り ま す 。 
* ス テー タス バー に テキ スト を 表示 する 
* ク リック し た と き に アラ ー ト を 表示 する 
* コー ザー の ブラ ウザ の バー ジョ ン を チェ ッ ク し て 、 適 切な ペー ジ に 振り 分 ける 
e 任意 の 設定 で 新しい ウィ ンド ウ を 開く 。 新しい ウィ ンド ウ か ら 元 の ウィ ンド ウ の 内 容 を 
操作 する 
* マウ スカ ー ソ ル が 通過 し た と き に 、 画 像 を 変更 する 


@ JavaScript の 記述 方 法 


HTML 文書 に JavaScript を 組み 込む に は 、 い くつ か の 方 法 が あり ます 。 


く script> タグ の 使用 
JavaScript で は <script> タグ (p.274 参照 ) を 使用 し て スク リプ ト を その まま HTML 文書 
に 記述 する こと が で きま す 。 こ れ が も っ と も 一 般 的 な 方 法 で す 。 


<script language= "JavaScript"> 
<!-- 
ここ に スク リプ ト を 記述 
/ー 
</script> 


この よう に 記述 する こと で 、 ブ ラウ ザ は <script> タグ と </script> タグ の 範囲 を JavaScript 
で ある と 認識 し 処理 を 実行 し ます 。 

JavaScript は 現在 まで に 、JavaScript1.0、1.1、1.2、…… 1.5 と 数 種類 の バー ジョ ン が 公 
開 さ れ て いま す 。 language="JavaScript1.x" と バー ジョ ン を 指定 する と 、 指 定 さ れ た バー ジョ 
ン に 対応 し た ブラ ウザ で の み 動 く よ う に な り ま す 。 こ うす る と 、 新しい バー ジョ ン の JavaScript 
で スク リプ ト を 記述 し た 際 な ど に 、 そ の バー ジョ ン に 未 対応 の ブラ ウザ で エラ ー が 発生 する こと 
を 防ぐ こと が で きま す 。 

JavaScript に 対応 し て いな い ブ ラウ ザ に 対し て は 、<!-- と //--> で スク リプ ト を コメ ント アウ 
ト し て 、 ス クリ プ ト が その まま 表示 され る の を 防ぎ ます 。 必 ず し も 書か な く て は いけ な いも の で 
は あり ませ ん が 、JavaScript に 対応 し て いな い ブ ラウ ザ を 使用 し て いる ユー ザー へ の 配慮 と し て 
記述 し て お く と 良心 的 で す 。 

で は 実際 に <script> タグ を 使っ て 、 簡 単 な ス クリ プ ト を 書い て み ま し ょ う 。 
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<htm> 

<head> 

<title>JavaScript の サン プル </ttle> 

</head> 

<body> 

<Script languaqge= "JavaScript"> 

<!-- 
document.write("<h1>Helo</h1>"): 

// > 

</script> 

JavaScript を 使っ た サン プル ペー ジ で す 。 

</ bodV> 


</htm に > 
人 








この HTML 文書 を ブラ ウザ で 読み 込む と 次 の よう に な り ま す 。 


nternet Explorer 
アイ ル (P) 編集 E) 表示 ⑦ お 気 に 入 D@⑯ ウツ - ル D ん へ M プ ⑬ 


Op- の 回 の の we 支 ooo の 7o の 全 - 回 ・』 


Hello 


JavaScript を 使っ た サン プル ペー ジ で す . 








language 属性 は deprecated OOCCCDCCLLCUCCLCCCLCCTCTTETUTTTECPTTYTYEKYYTYTD 


<Script> タグ を 使っ て HTML 文書 中 に JavaScript を 記述 する 場合 は 、 従 来 か ら の 流れ で <script 
language="JavaScript"> を 使用 する の が 一 般 的 で す 。 し か し 、 こ の language 属性 は HTML4.0 で 推奨 
し な い (deprecated) 属性 に 指定 され 、 代 わり に type 属性 を 使用 する よう 規定 され まし た 。HTML4.0 
に し た が 3 う 場合 は 、language 属性 に 代わ っ て この type 属性 を 指定 する の が 仕様 上 の 正式 な 記述 方 法 で す 。 
た だ し 、I 旧 バー ジョ ン の ブラ ウザ と の 互換 性 の 問題 が あめ る た め 、 使 用 に は 注意 が 必要 で す 。 


<Script type="text/javascript"> 
<!-- 
スク リブ ト 


//-> 
</scrpt> 


エス メメ ミス ミミ スミ ミミ トメ トミ ミミ ミミ ミミ メト オメ オオ メメ メス ドド トス オメ SSIIIKIREEEIEIKXKKIXAAIKKKAEEEIIEKEKKKKYYI 
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外部 ファ イル を 読み 込む 

また 、 ス クリ プ ブ ト を 記述 し た ファ イル を 別に 保存 し て お き (拡張 子 *jS)、 こ れ を HTML 文書 に 
読み 込ん で 実行 する と いう 方 法 も あり ます 。 こ の 場合 、 ス クリ プ ト フ ァイル は src 属性 で 指定 し 、 
スク リプ ブ ト を 読み 込み た いと ころ に 次 の よう に 記述 し ます 。 複 数 の ペー ジ で 同一 の スク リプ ト を 
使用 し た いと き な ど に 便利 な 方 法 で す 。 


<script src="xxx.js">ー</script> 


実際 に JavaScript を 記述 する た め に は 、 一 定 の 文法 や オブ ジェ クト ・ プ ロ パ ティ ・ メ ソ ッ ド 
等 さま ざま な 用 語 を 理解 する 必要 が あり ます が 、 こ れ ら に つい て は 本 書 姉妹 書 「JavaScript 辞典 
第 2 版 」 を ご 覧 くだ さい 。 


@ JavaScript を 使う 際 の 注意 


JavaScript を 使っ た ペー ジ を 作成 し よう と 思っ た と き に 注意 し な く て は な ら な い の は 、 ブ ラウ 
ザ の 種類 や ブラ ウザ の バー ジョ ン に よっ て 、 動 作 が 異な る 場合 が ある と いう こと で す 。 ス クリ プ 
ト に よっ て は うま く 動 作 し な か っ た り 、 エ ラー が 発生 する 原因 に な る こと も あり ます か ら 、 充 分 
に テス ト し て か ら 使 用 する よう に し まし ょ う 。 

そし て 当然 の こと な が ら JavaScript を サポ ー ト し て いな い ブ ラウ ザ や 、 ユ ー ザ ー が 
JavaScript を 実行 し な い 設定 に し て いる 場合 に も 動作 し ませ ん 。 アク セス し て くる ユー ザー の 環 
境 は さま ざま だ と いう こと を 忘れ ず 、JavaScript に 対応 し て いな い 場 合 へ の 対処 方 法 を 用 意 する 
こと も 重要 で す 。 

Web 上 に は コピ ー& ペ ー ス ト す る だ け で 利用 可能 な スク リプ ト を 提供 する サイ ト が た くさ ん あ 
り ま す 。 も ちろ ん そう し た ソー ス を 利用 する の も ひと つの 手 で す が 、 そ の スク リプ ト が どの よう 
な 処理 を 行っ て いる の か 理解 で き 、 自 分 で も 作成 する こと が で きる よう に な れ ば 、Web ペー ジ を 
作成 する 楽し み が さ ら に 増え る こと で し ょ う 。 

本 書 姉妹 書 「JavaScript 辞 典 第 2 版 ] を 参考 に 、 ぜ ひ チ ャ レン ジ し て みて くだ さい 。 
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JavaScript と 名 前 が 似 て いる と いう 理由 か ら 、Java や Java アプ レッ ト と いう 名 前 に 反応 し 
た 人 も いる の で は な いで し ょ うか 。 し か し 、JavaScript の 項 で も 述べ た よう に 、Java と 
JavaScript は 別 の も の で す 。 

ここ で は その Java に つい て 簡単 に 説明 し ます 。 


@ Java と は 


Java は Sun Microsystems 社 が 開発 し た プロ グラ ミン グ 言 語 で す 。 さま ざま な デバ イス ( 装 
置 ) 上 で 同じ ソフ トウ ェ ア を 動か せる よう に し よう と いう 発想 の も と 、 セ キュ リティ 面 や ネッ ト 
ワー ク 機 能 を 強化 し て 開発 され まし た 。 そ の た め 、 同 じ プ ログ ラム を どの よう な コン ピュ ー タ で 
も 実行 で きる と いう 点 が 最大 の 特徴 と な っ て いま す 。 こ の 特徴 は Java 仮想 マシ ン (Java バー チ 
ャ ル マ シ ン ・ JavaVM) と いう し くみ に よっ て 実現 され ます 。 こ れ は Java 仮想 マシ ン が コン ピ 
ュー タ の な か に Java が 動作 する た め の 仮 の マシ ン を つく り 、 こ こ で Java を 動作 させ る と いう も 
の で す 。 で すか ら OS や ハー ドウ ェ ア が 異な る コン ピュ ー タ で あっ て も 、Java 仮想 マシ ン さ え あ 
れ ば 同じ Java プロ グラ ム が 動作 可能 な の で す 。 

こう し た 特徴 を 活か し 、Java は さま ざま な 用 途 で 利用 され て いま す 。 通常 Java で 作成 し た プ 
ログ ラム は Java アプ リケーション と 言い ます が 、Web ペー ジ で 利用 され る よう な 比較 的 小さ な 
プロ グラ ム は 特に Java アプ レッ ト と 呼ば れ て いま す 。 


⑯ Java アプレット で で きる こと 


Java ア プレ ッ ト を 利用 する と 、Web ペー ジ に 動き を 加え る こと が で きま す 。 HTML や スタ イ 
ル シ ー ト で 記述 され た Web ペー ジ は 文書 の 構造 や 体裁 の 情報 し か 持た な いた め 、 基本 的 に 動き と 
いう も の は あり ませ ん 。 し か し 、 こ こ に アプ レッ ト を 組み 込む こと で 、 テ キス ト や 画像 を 制御 し 
た り タ イマ ー を 設定 する な ど 、 動 的 な 表現 が 可能 に な る の で す 。 
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⑯ Java アプレット を Web ペー ジ に 組み 込む 





プロ グラ ミン グ に つい て は 本 書 の 域 を こえ る た めこ こ で は 割愛 し ます 。 ア プレ ッ ト は 素材 を 提 
供する サイ ト か ら 入 手 す る こと も 可能 で す 。 そ うい っ た も の を 利用 し て みる の も よい で し ょ う 。 
アプ レッ ト を Web ペー ジ に 組み 込む に は <applet> タグ を 利用 し ます 。 


<applet code=" ク ラス ファ イル 名 " 

width=" ア プレ ッ ト の 幅 " (ビク セル また は %⑰) 

height=" ア プレ ッ ト の 高 さ " (ビク セル また は %) 

name=" 他 の アプ レッ ト 等 と の 間 で アプ レッ ト を 認識 させ る た め の 名 前 (省略 可 ) "> 
<Param name=" 引 数 の 名 前 " 

Value="name で 指定 し た 引数 に 対す る 値 (省略 可 ) "> 
ここ に アプ レッ ト に 対応 し て いな い ブ ラウ ザ に 表示 させ る 内 容 を 書く こと が で きま す 。 
</applet> 


HTML4.01 で は <applet> タグ は 推奨 し な い タ グ に 指定 され て お り 、 代 わり に <object> タグ 
(p.281 参照 ) を 利用 する こと に な っ て いま す 。 し か し <object> タグ を サポ ー ト する ブラ ウザ が 
まだ 少な いた め 、<applet> タグ が 引き 続き 利用 され て いま す 。 


@⑯ Java アプ レッ ト を 利用 する に は 


Java は OS や ハー ドウ ェ ア に 依存 せ ず 、 ど の よう な 環境 で も 動作 可能 と いう だ け で な く 、 本 格 
的 な プロ グラ ム を 作成 し て ネッ トワ ー ク 上 や ロー カル 環境 で 利用 で きる と いう メリ ッ ト が あり ま 
す 。 た と えば 、 デ ー タ ベー ス を 有効 に 活用 で きる よう に し た り 、 企 業 内 で アプ リケーション の 導 
入 ・ 管 理 に か か る コス ト の 削減 に つなげ る こと も で きる の で す 。 

し か し 、 本 格 的 な プロ グラ ム を 作成 で きる と いう こと は 同時 に プロ グラ ミン グ が 難し いと いう 
こと で も あり ます 。 習得 は 容易 で は あり ませ ん し 、 イ ンタ ーネット や イン トラ ネッ ト な ど ネ ッ ト 
ワー ク で 利用 し た い 場合 に は ネッ トワーク の 知識 も 要求 され ます 。 ま た 、 開 発 用 の 環境 を 用 意 し 、 
コン パ バイル (プロ グラ ム 言 語 で 作成 し た ソー スコ ー ド を コン ピュ ー タ が 理解 で きる 機械 語 に 変換 
する こと ) 作業 を 経 な けれ ば な り ま せん 。 総じて あま り 手 軽 と は いえ な い 言 語 で す 。 

だ か ら と いっ て Java アプレット は 自分 と は 無縁 の も の だ と 即断 する こと は あり ませ ん 。 タ グ の 
説明 の 部 分 で 触れ た よう に Web ペー ジ 用 の 素材 と し て 自作 の アプ レッ ト を 公開 配布 し て いる サイ 
ト は 数 多く あり 、 そ の よう な 素材 を 借用 する こと も 可能 だ か ら で す 。 た だ し 、 利 用 は 自己 責任 の も 
と で 行う とこ と も に 、Java アプ レッ ト を 利用 で き な い 環境 に ある 人 へ の 配慮 も 忘れ な いよ うに し ま 
し ょ う 。 

Java に つい て の 説明 は 本 書 の 域 を こそ える た めこ れ 以 上 の 説明 は 割愛 し ます 。 よ り 詳 細 に つい て 
は Web ペー ジ や 専門 書 を 参照 し こく だ さい 。 
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Internet Explorer お よび Netscape Navigator の いずれ も バー ジョ ン 4 か ら 導 入 さ れ た 
Dynamic HTML で は 、HTML や スタ イル シー ト な ど に よっ て 構築 し た ペー ジ に お いて 、 ペ ー ジ 
上 の 各種 要素 を オブ ジェ クト と し て 扱い (Document Object Model : DOM)、 ス クリ プ ト 言 
語 を 通じ て 変化 を 加え る こと が で きま す 。 一 般 的 に HTML の み で 作成 され た ペー ジ は 、 リ ロー ド 
(再読 み 込み ) を し な いと ペー ジ 内 容 を 変化 させ る こと は で きま せん が 、Dynamic HTML で は 、 
リロ ー ド する こと な く ペ ー ジ を 変化 させ る こと が で きる の で す 。 ま た 、 マ ウス の 動作 や キー ボー ド 
入力 な ど 、 さ ま ざ ま な イベ ント を キャ ッ チ する こと が で きま す 。 こ の た め Dynamic HTML を 用 
いる こと に より 、 ユ ー ザ ー の 入力 に 反応 する イン タラ クティ ブ な ペー ジ の 構築 が 可能 と な り ま す 。 

Dynamic HTML に つい て 詳し く は 専門 の 書籍 等 を ご 覧 くだ さい 。 本 書 で は 大 ま か な 概 要 の み 
を 解説 し ます 。 


い El rg を - か キー 


具体 例 と し て 、Dynamic HTML で は 以下 の よう な 機能 を 、Web サー バ ヘ アク セス する こと 
な く 実 現 で きま す 。 

e 文字 の 色 、 サ イズ 、 ス タイ ル 、 表 示 ・ 非 表示 の 変更 

s 画像 の 拡大 、 縮 小 、 特 殊 効果 の 付与 

e 文字 や 画像 の 位置 変更 、 重 ね 合わ せ 、 ア ニメーション 効果 の 演出 

* ペー ジ 要 素 の ドラ ッ グ ・ ア ンド ・ ド ロッ プ 


ヨド ラッ グ & ド ロッ ブ - Microgo 






アイ ル ( 上 編集 6) 表 


の 国 還 人 の 次 mA 奉 ケ 7 の は ・ き 


ッ グ & ドロップ - Micr 


ファ イル 還 集 ) 表示 お 気 に 入 DQ ウー ル ① へ JM プ ⑪ 
較 司 人 ぬ の の we 表 2m20 軸 ケ の の G- 生 





人 簡単 な Dynamic HTML の 例 。 ユ ー ザ ー が ペー ジ 上 の オブ ジェ クト を ドラ ッ グ & ドロ ッ プ する こと が で きま す 








@ Dynamic HTML の デメ リッ ト 一 汎用 性 

この よう に Dynamic HTML は 、Web ペー ジ の 可能 性 を 拡張 する すばらし い 技 術 で す が 、 問 
題 点 と し て 汎用 性 が 挙げ られ ます 。 ま ず 、Dynamic HTML と いう 単 一 の 名 称 を 用 いな が ら 、 
Netscape Navigator と Internet Explorer で は 規格 が 異な る た め 、 一 方 の 規格 に 準拠 し て 作成 
し た ペー ジ が 、 も う 一 方 の ブラ ウザ で は 閲覧 で を な いと いう 事態 が 発生 し ます 。 ま た 、 ブ ラウ ザ 
の バー ジョ ン に よっ て も 利用 可能 な Dynamic HTML に 違い が あり ます 。 こ の た め Dynamic 
HTML を 用 いる 際 に は 、 ユ ー ザ ー に お ける ブラ ウザ 環境 を 考慮 し 、 複 数 の ペー ジ を 用 意 す る な ど 
の 配慮 が 必要 で す 。 以下 で は 、 ブ ラウ ザ ご と の Dynamic HTML の 特徴 を 説明 し ます 。 


Internet Explorer 

Internet Explorer に お ける Dynamic HTML は 、 バ ー ジ ョ ン を 重ね る に つれ て その 機能 を 拡 
張 し て いま す 。 バ ー ジ ョ ン 4 か ら ペ ー ジ 上 の テキ ス ト や テー ブル 、 画 像 な ど ほ ぼ す べ て の 要素 に 
つい て 、 直 接 そ れ ら の 位置 ・ サ イズ ・ ス タイ ル ・ 表 示 条 件 な ど が 自由 に 設定 ・ 変 更 で きま す 。 ま 
た 、 こ れ ら の 要素 は ユー ザー 入力 な どの 各種 イベ ント を 、 個 々 に 取得 で きま す 。 ブ ラウ ザ 自 体 が 
各種 オブ ジェ クト に 対し て 視覚 的 な 特殊 効果 を 与え る 機能 を 持ち お 、 ま た HTML ファ イル と は 別に 
用 意 し た デー タフ ァイル を 、 デ ー タ ベー ス 的 に 扱う 機能 も 備え て いま す 。 バー ジョン 5 で は 、 
Dynamic HTML 機能 の コン ポー ネン ト 化 が 可能 と な り 、 バ ー ジ ョ ン 5.5 で は 単体 で 機能 する ア 
プリ ケー ショ ン の 構築 や 、 独 自 の タグ の 宣言 な ど が 可能 と な っ て いま す 。 


Netscape Navigator 

Netscape Navigator に お ける Dynamic HTML は 、Internet Explorer に 比べ る と いさ さか 
状況 が 複雑 で す 。 

バー ジョ ン 4.x に お ける Dynamic HTML は 、<layer> と いう タグ を 用 いる こと に よっ て 実現 
し ます 。 レ イヤ ー は 、 透明 な 膜 に 例え る と わか りや すい で し ょ う 。Netscape Navigator 4.x に 
お いて は 、 こ れ ら レイ ヤー に 対し て 変化 を 加え る こと で Dynamic HTML を 実現 し ます 。 つま り 、 
ペー ジ 上 の テキ スト や テー ブル 、 画 像 な どの 位置 ・ サ イズ ・ 表 示 条 件 な ど を 変更 する 場合 、 ま ず 
対象 と な る 要素 を レイ ヤー 上 に 配置 し た 上 で 、 レ イヤ ー に 対し て スク リプ ト を 通じ 変化 を 加え ま 
す 。 同様 に イベ ント の 取得 を 行う た め に は 、 レ イヤ ー に イベ ント ハン ドラ を 設定 し ます 。 

レイ ヤー 以外 に 挙げ られ る Netscape Navigator 4.x の Dynamic HTML 機 能 と し て は 、 ユ 
ー ザ ー 環 境 に イン ス トール され て いな い フ ォ ン ト を 、 サ ー バ 上 か ら ダ ウン ロー ド し て 表示 する ダ 
イナ ミッ ク フ ォ ント 機能 が あり ます 。 

な お 、Netscape 6 で は Dynamic HTML へ の 対応 を 全面 的 に 廃止 し て いま す 。 こ の た め レ イ 
ヤー や ダイ ナミ ッ ク フ ォ ン ト は 使用 で きま せん 。 し か し な が ら 、JavaScript 1.5 お よび DOM1、 
HTML 4.x を 駆使 する こと に より Dynamic HTML 的 な 動作 を 実現 する こと が で きま す 。 ま た 
Netscape 6 で は 、 オ ブ ジ ェクト に お いて 取得 で きる イベ ント が 豊富 に な っ た た め 、 バ ー ジ ョ ン 4 
と 比べ て Internet Explorer に お ける Dynamic HTML 機能 と の 類似 点 が より 多く な っ て いま す 。 








ADVANCED TECHNIQUE 





Web ペー ジ で 頻繁 に 見 か ける アク セス カウ ンタ や 掲示 板 は 、CGI (Common Gateway 
Interface) と いう シス テム に よっ て 実現 され て いま す 。 こ れ は 、 ブ ラウ ザ か ら の 入力 を サー ババ に 
渡し 、 そ の 要求 に 応じ て サー バ 内 の プロ グラ ム を 実行 させ て 、 そ の 実行 結果 を 再び ブラ ウザ に 返 
すし くみ の こと で す 。 ア クセ スカ ウン タ や 掲示 板 の ほ か 、 フ ォ ー ム に 入力 され た 内 容 を メー ル で 
送信 する フォ ー ム メー ル 、 パ スワ ー ド に よる アク セス 制限 な ど 、 さ ま ざ ま な こと に 利用 され て い 
ます 。 

ここ で は 簡単 に CGI に つい て 説明 し ます 。 


@ CGI の し くみ 


CGI で 処理 を 行う し くみ は 次 の よう に な っ て いま す 。 






さす 
1 間 醒 





⑩ ブラ ウザ が WWW サー バ に CGI スク リプ ト の 起動 を 要求 

@ WWW サー バ が CGI スク リプ ト を 起動 

サー バ 上 で 処 理 

⑩ CGI スク リプ ト が 実行 結果 を 返す 

@ 実行 結果 を WWW サー バ が ブラ ウザ に 返す (ブラ ウザ に 表示 ) 


ブラ ウザ 側 は 入力 お よび 実行 結果 の 表示 を 行う だ け で 、 特 別 な 処理 を 必要 と し ませ ん 。 その た め 
一 般 の PC 用 の Web ペー ジ だ け で な く 、i モ ー ド な どの 携帯 端末 で も CGI が 利用 で きる の で す 。 

CGI スク リプ ト は 、 現在 は Perl と いう 言語 で 書か れる こと が も っ と も 多い の で す が 、C 言 語 や 
UNIX の シェ ルス クリ プ ト な ども 使わ れ ま す 。 い ずれ に せよ プロ グラ ム の 知識 が 要求 され る た め 、 
HTML ファ イル の 作成 より は 高度 な 作業 と な り ま す 。 だ か ら と いっ て 、 即 CGI の 利用 を あき ら め 
る こと は あり ませ ん 。 無料 の スク リプ ト が Web 上 で 数 多く 公開 され て いま す の で 、 そ れ を 活用 す 
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れ ば よい で し ょ う 。 


⑯ CGI の 利用 


スク リプ ト を 入手 し た だ け で は CGI は 利用 で きま せん 。 利用 する た め に は 、 ま ず 、 自 分 の 
Web ペー ジ の サー バ (プロ バイ ダ な ど ) が CGI の 使用 を 許可 し て いる こと が 前 提 と な り ま す 。 
セキ ュ リ ティ の 面 か ら CGI の 使用 を 制限 し た り 、 使 用 自体 を 禁止 し て いる プロ バイ ダ も ある か ら 
で す 。CQI が 使用 で きる 場合 は 、Perl の パス や CGI 関係 の ファ イル を 置く ディ レク トリ の 確 
認 、.htaccess の 設定 、 パ ー ミ ッ シ ョ ン の 変更 な ど 、 実際 に CGI を 利用 する まで に さら に いく つ 
か の 手順 を 経る 必要 も あり ます 。 詳細 は プロ バイ ダ に よっ て 異な り しま す の で 、 そ れ ぞ れ の 規定 を 
参照 し て くだ さい 。 

アク セス カウ ンタ や 掲示 板 と いっ た 定番 の CGI は 、 プ ロバ イダ 側が あら か じ め 用 意 し て いる こ 
と も あり ます 。 こ うし た CGI を 利用 すれ ば 、 よ り 簡 単に 設置 する こと が で きま すし 、 も っ と 簡単 
に 利用 し た い の で あれ ば 、 レ ンタ ル サ ー ビ ス を 提供 し て いる サイ ト に 登録 する と いう 方 法 も あり 
ます 。 こ の 場合 は その サイ ト に リン ク を 張っ て 利用 する 形 に な り ま す 。 


義 の c1E【 の た ネコ 


CGI で は サー バ の CPU を 使っ て 処理 が 行わ れる た め 、 利 用 の 仕方 に よっ て は サー ババ に 多大 な 
負担 を か けた り 、 サ ー バ の セキ ュ リ ティ を 脅かす 危険 性 も 十分 に 含ん で お り 、 最 悪 の 場合 は 、 サ 
ー バ 自体 を ダウ ン さ せ て し まう こと も あり ます 。 こ の よう な 場合 、 同 じ サ ー バ を 共有 する ユー ザ 
ー に 与え る 迷惑 や 被害 は 小さ く あ り ま せん 。CGI の 利用 に 際 し て は 、 け し て その よう な こと の な 
いよ う 細 心 の 注意 を 払う よう に し て くだ さい >。 

また 、 掲 示 板 な ど に つい て は 、 悪 質 な 書き 込み の 標的 と な る 可能 性 も あり ます の で 、 日 頃 か ら 
責任 を 持っ て 管理 する 必要 が あり ます 。 

そし て 、i モ ー ド 用 の ペー ジ で CGI を 利用 する 場合 は 特に 、 ユー ザー が 携帯 電話 と いう 小さ な 道 
具 で アク セス し て くる こと も 考慮 し まし ょ う 。 | モード で は PC 用 の Web ブラ ウザ と 違っ て 入力 
方 法 や サイ ズ に 制限 が あり ます 。 こ の 点 を 考慮 し た 入力 フォ ー ム を HTML で 作成 する と 、 利 用 し 
や すい ペー ジ に な り ま す 。 

CGI で は 、HTML だ け で は 実現 で き を なか っ た ペー ジ の 作成 が 可能 で す が 、 同 時 に 少な か ら ず マ 
イナ ス 点 も 含ん で いま す 。 こ の よう な こと を 、 十 分 に 理解 し た 上 で 利用 する よう に し て くだ さい 。 
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Web ペー ジ 作 成 の アド バン ス ド テ クニ ッ ク と は 多少 意味 合い が 異な り ま す が 、W3C で 重視 さ 
れ て いる も の に 、 ア クセ シビ リティ と いう も の が あり ます 。 こ れ は 、Web ペー ジ を 作成 する 際 に 
ぜひ と も 考慮 し た い 概念 で す の で 、 こ こ で 概要 を 紹介 し て お きた いと 思い ます 。 


| ウ シン ムン スニ り レ だ ぎ コ (・ 


アク セ シ ビ リティ (accessibility) と いう 言葉 に は も と も と 「 ア クセ ス し や すい 」 「 ア クセ ス で 
きる 」 な どの 意味 が あり ます 。 こ こ か ら 情 報 通信 の 世界 で は 「 障 害 の 有無 や 年 齢 を 問わ ず よ り 広 
い 範 囲 の ユー ザー が コン ピュ ー タ を 利用 し 、 情 報 の 送受 信 が で きる と いう こと 」 と いっ た 意味 で 
使わ れる よう に な り ま し た 。 

な ぜ こ の よう かな 概 訪 が だ 生まれ た の か は 、Web ペー ジ を 利用 する ユー ザー の 環境 を 考え て みる と 
理解 で きま す 。 W3C に よる Web Content Accessibility Guideline 1.0 を 参考 に 、 Web ペー 
ジ を 利用 する 環境 と し て 現在 あり 得る 状況 を 考え て み ま し ょ う 。 


* 見 る こと 、 聞 く こ と 、 動 く こ と が で き な い 。 ま た は 、 あ る 種 の 情報 を 簡単 に は 、 も し く 
は まっ た く 処 理 で き な い 

* テキ スト を 読ん だ り 文 章 を 理解 し た りす る こと が 困難 

* キー ボー ド や マウ ス を 使用 を し て な いか 、 使 うこ と が で き な い 

* テキ スト し か 表示 で き な い 画面 や 小さ な 画面 を 使っ て いる 、 も し く は 低速 で し か イン タ 
ーネット に 接続 で を き ない 

e 文書 が 書か れ て いる 言語 を 容易 に 話し た り 理解 し た りす る こと が で き な い 

* 目 や 耳 、 手 が 使え な い 、 も し く は ふさ が っ た 状況 に ある (た と えば 運転 中 や 騒音 環境 で 
働い て いる 場合 な ど ) 

* 古い バー ジョ ン の ブラ ウザ 、 ま っ た く 異 な っ た 種類 の ブラ ウザ 、 音 声 ブ ラウ ザ 、 も し く 
は 異な っ た OS を 使っ て いる 


この よう に Web ペー ジ を 利用 する 環境 は さま ざま で あり 、 ペ ー ジ の 作者 の 環境 と は 必ず し も 同 
じ で は あり ませ ん 。「 当 然 」 「 容 易 ] と 思っ て いた こと が 、 実 は 当然 で も 容易 で も な く 、 さ ま ざ ま 
に 制約 の ある 環境 に お か れ て いる ユー ザー も いる の で す 。 ア クセ シビ リティ と は 、 そ うし た ユー 
ザー に も 配慮 し 、 ユ ー ザ ー が どの よう な 機器 を 利用 し て いて も 、 ど の よう な 状況 に あっ て も 利用 
し や すい ペー ジ を 作成 する た め の 概念 と 技術 な の で す 。 
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それ を 受け て 、 ア クセ シビ リティ を 考慮 し た Web ペー ジ (これ を 「 ア クセ シブ ル な ペー ジ 」 と 
表現 し た り し ます ) と は 、「 確 実に 適切 な 変換 が 行わ れ ]「 内 容 を 理解 し や すく か つづ 操作 し や すい ] 
ペー ジ で ある と され て いま す 。 


「 確 実に 適切 な 変換 が 行わ れる ペー ジ 」 と は 

身体 的 な ハン ディ キャ ッ プ 、 使 用 する ハー ドウ ェ ア や 周囲 の 状況 に よる 制約 が あっ て も 利用 で 
きる ペー ジ で ある こと 。 音声 や 画像 、 映 像 の 代わ り と な る 情報 も 同時 に 提供 され 、 ま た 、 画 面 の 
大 小 や マウ ス ・ キ ー ボ ー ド な ど 特 定 の ハー ドウ ェ ア に 依存 し な いよ うな ペー ジ を 作成 する と いう 
こと で す 。 その 際 、 構 造 と 体裁 を 分 離し 、 テ キス ト を 適切 に 利用 する こと は 重要 な ポイ ント で す 。 


「 内 容 を 理解 し や すく 、 か つづ 操作 し や すい ペー ジ 」 と は 

わか りや すい 言葉 を 使う 9 こと は も ちろ ん で す が 、 イ メー ジマ ッ プ や スク ロー ル バ ー な ど 視 覚 的 
な 方 法 が 使用 で き な い 場合 や 、 ペ ー ジ 全体 を 見 る こと が で き な い 場合 な ど を 考慮 し て 、 ペ ー ジ の 
相互 関係 も 理解 し や すく する と いう こと で す 。 


@⑯ アク セ シ ブ ル で ある た め の ボ イン ト 





そし て 、 こ の よう な ペー ジ を 作成 する た め に 、W3C は 次 の よう な ボ ポイント を 提示 し て いま す 。 


e 音声 や 画像 に は 同等 の 意味 を 持つ 代替 手段 を 用 意 する 

* 色 だ け に 依存 し な い 

* 正 し く タ グ 付 けし 、 ス タイ ル シ ー ト を 適切 に 使用 する 

e 文書 で 使用 する 言語 を 明示 する 

* テー ブル は 適切 に 変換 ・ 表 現さ れる よう に 記述 する 

e 新 技術 を 利用 し た ペー ジ は 、 そ の 技術 を サポ ー ト し て いな い 環 境 で も 情報 が 伝わる よう 
に する 

e 移動 、 点 滅 、 ス クロ ー ル 、 自 動 更 新 な ど ペ ー ジ 内 容 が 動く も の は 、 ユ ー ザ ー 側 で 停止 で 
きる よう に する 

* プラ グイ ン な ど 組 み 込ま れ た オブ ジェ クト に も 、 ア クセ シビ リティ を 考慮 する 

e 装置 に 依存 し な い 設 計 に する 

es 古い ブラ ウザ や ユー ザー を 補助 する 技術 を 使用 し た 場合 に も 、 適 切 に 情報 を 得 ら れる よ 
うに する 

s W3C の 技術 と ガイ ドラ イン を 利用 し 、 推 奨 さ れ な い 機 能 や 外部 に よっ て 独自 に 拡張 さ 
れ た 機能 な ど は 使用 し な い 

* 文脈 や 文書 の 前 後 関係 を 表す 情報 を 提供 する 

* ナ ビ ゲ ー シ ョ ン バ ー や サイ トマ ッ プ な ど 、 明 瞭 な ナビ ゲー ショ ン の た め の 機 能 を 用 意 する 
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* 文書 は 簡潔 明 陳 で わる こと 


それ ぞ れ の ポイ ント を 実現 する た め の 具 体 的 な 手段 や 注意 点 は 、W3C の 文書 に 詳細 に 示さ れ て 
いま す の で そちら を 参考 に し 、 よ り 多 く の ユ ー ザ ー が 利用 で きる Web ペー ジ の 作成 を 目指 し て く 
だ さい 。 


アク セ シ ビ リティ に 関し て は 、 以 下 の よ うな サイ ト を 参照 する と よい で し ょ う 。 


Web Content Accessibility Guidelines 1.0 (英語 ) 
http://www.w3.org/TR/WAI-WEBCONTENT 
W3C が 提唱 する 、 ア クセ シビ リティ の た め の 原 則 と 設計 に 関す る ガイ ドラ イン 。 


Techniques for Web Content Accessibility Guidelines 1.0 (英語 ) 
http://www.w3.org/TR/WCAG10-TECHS/ 
上 記 ガ イド ライ ン を 実践 する 具体 的 な 方 法 な ど に 関す る 技術 書 。 


ここ ろ Web 
http://www.kokoroweb.org/ 
障害 者 ・ 高 齢 者 の パソ コン 利用 や 、 コ ミュ ニケ ーション を 支援 する た め の サ イト 。 


Web アク セス を 考え る 会 (TWAJ) 

http://thinkman.cup.com/ 
視覚 障害 者 が 利用 し や すい バリ アフ リー の Web ペー ジ の 作成 と 推進 行っ て いる 団体 、Web ア 
クセ ス を 考え る 会 (TWAJ) の サイ ト 。 
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バニ レタ レレ ニン 
色 の 基礎 知識 
ロニ レル アノ) 2 


ビジュ アル イン デック ス 
HTML タグ 一 覧 

i モ ー ド 対応 HTML 一 覧 
i モ ー ド 用 絵文字 一 覧 
EE シル ジィ ルルル. 
DI 昌 モジ テル ルル 


用 語 イ ン デ ックス 
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1 APPENDIX 





HTML タグ で は 、 背 景 や 文字 な どの 色 を 指定 する 際 に 、 色 を 構成 する 3 つの 値 を 使っ て 
「#rrggbb] と いう 色 指 定 値 か 、 色 名 (colorname) を 使用 し ます 。 
色 指 定 値 に よる 指定 <body background="#f0000"> 
色 名 に よる 指定 <body backqround="red"> 


@ 反 指 定 値 に よる 指定 


「#] に つづ け て 、 赤 (red)、 緑 (green)、 青 (blue) の それ ぞ れ の 割合 を 2 桁 の 16 進数 
(00 一 ff) で 表現 し 、 色 を 指定 する 方 法 で す 。 

コン ピュ ー タ で は 光 の 3 原色 で ある 赤 、 緑 、 青 の それ ぞ れ の 強 さ を 0 一 255 まで の 数 値 (256 
段階 ) で 表す こと で 、 特 定 の 色 を 表現 し て いま す 。 し た が っ て フル カラ ー と 呼ば れる も の で は 
256 x 256 x 256=16777216、 つ まり 1677 万 7216 色 を 扱え る と いう こと に な り ま す 。 

と ころ が コン ピュ ー タ で は 情報 は すべ て 0 と 1 の 2 進 法 で 表現 され る た め 、 数 値 を 2 進数 で 表 
そう と する と 桁 数 が 非常 に 長く な り が ち で す 。 そ こ で 2 進数 の 4 桁 を まとめ 、16 進 数 (0 一 9 の 
10 種類 の 数 字 に af の 6 種類 の アル ファ ベッ ト を 加え 、16 ご と に 桁 が あがる 方 式 ) で 数 値 を 表 
記す る よう に な り ま し た 。 色 指定 値 ( 打 rggbb) 方 式 で の 記述 方 法 は この 16 進数 表記 に し た が っ 
た も の で す 。 

た と えば 、 赤 =51、 緑 =102、 青 =255 の 色 を 16 進数 で 表す と 、 赤 =33、 緑 =66、 青 =ff と い 
う 指 定 と な り 、 色 指定 値 は 「#3366ff] と な り ま す 。 

いく つか の 色 に つい て は 実際 の #rrggbb の 値 を 掲載 し て いま す の で 参考 に し て くだ さい 。 また 、 
10 進数 と 16 進数 の 対応 表 も 掲載 し まし た の で 、 こ の 関係 を 比較 し て みる と よい で し ょ よう 。 

な お 、 も ちろ ん コン ピュ ー タ 内 部 で は すべ て の 数 字 を 2 進数 に 置き 換え て 処理 し て いる こと に 
は 変わ り が あり ませ ん 。 


コー ゴリ リー リド AA トト トス ミミ ミミ ミミ メ ミミ ミミ メメ ミミ ミミ ミミ メメ ミミ メオ ミ ミミ ミミ ミミ メメ ミミ ミミ メメ ミミ ミミ メ ミ ミミ ミミ ミミ メ ミ 】 


原理 的 に 、 印 刷 で は Web 上 (モニ タ で 見 る 色 ) の 色 を 完全 に 再現 する こと は で きま せん 。 こ こ に 記載 
され た 色 は あく まで も 参考 に と ど め 、 実際 に お 使い に な る 場合 は 、、 モ ニタ 上 で 色 を 確認 し て くだ さい 。 ま 
た 、 細 か い 色 の ニュ アン ス は 、Web ペー ジ を 見 に 来る 人 の モニ タ の 環境 に よっ て 大 きく 異な る 場合 も あ 
る の で 、 注 意 が 必要 で す 。 
な お 、 本 書 の Web ペー ジ で は 、 こ こ に 掲載 し こい る カラ ー チ ャ ー ト を 実際 に Web 上 で ご 覧 いた だ く 
こと が で きま す 。 
http://www.shoeisha.com/book/pc/dic/ 
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標準 16 色 
この 16 色 は HTML4.01 で 定義 され て いる 色 で す 。 こ れ ら は Windows VGA の パレ ッ ト に 準 
拠 し た 色 で 、 色 名 に よる 指定 (p.344) で も 正式 に 使え る 色 と な り ま す 。 


#000080 navy LUU り UE りり Up #000000 black r000 g000 b000 








#0000ff blue r000 g000 b255 #808080 gray r128 g128 b128 





#OOffff aqua r000 g255 b255 #COcOc0 silver T192 g192 b192 


r128 g000 b000 


#B08000 olive r128 q128 b000 


#008080 teal LUUULYt: ル 4:】 


#800080 purple r128 q000 b128 





10 進数 と 16 進数 の 対応 表 で す 。 色 を 表す 256 段階 の 数 値 (左側 ) は 、16 進数 で 表す と 右側 の 数 値 と 
な り ま す 。 赤 字 の 部 分 は Web Safe カラ ー を 構成 する 数 値 で す 。 





9 輝 数 16 進 贅 区 本 | 16 進 釣 証 0 克 数 16 進 到 放 9 克 数 16 進 贅 計 9 訂 数 | 16 進数 人 稚 数 16 進 軒 工数 16 進 軒 9 護 数 | 16 進 数 


同 5 出 oo 量 三 :o 詩 細 <o 語 古 co 計 5 嗣 so 汽 6 ao 面 9 器 co 細 村 co 
| 01 細 議 叶 21 畑 肌 織 21 紳 隊 較 61 短 症 明 51 縛 間 a1 瑞 明 較 ) 組閣 較 





1 

2 02 証 36 22 細 生 細 42 課 吸 62 紳 旨 82 敵 遇 症 22 敵 題 時 に 2 組 題 間 e2 
3 03 軸 語 23 舞 還 隊 業 43 還 呈 63 軸 還 是 | 83 細 間 23 紳 還 旨 CO 納 呈 明 63 
4 04 36 24 四 69h 44 証 00| 64 32| 84 時 64| 4 軒 96| 4 上 288 e4 
5 05 雇 25 半生 生 45 細 昌 65 汗 較 85 細 5 25 細 呈 咽 に 5 証 題 雇 e5 
6 06 軸 証 紳 2 縛 還 胃 46 細 証 66 軒 旨 細 86 細 全 26 細 商 明 CO 細 症 較 e6 
7 07 敵 証 27 主 栖 47 油 因 67 計 細 87 細 呈 衣 27 細 是 c7 証 隊 e7 
8 08 40 開 28 下 22 | 28 計 04 68 店 36| 88 店 68| 8 還 00| c8 請 32| e8 
9 09 言 村 29 商 還 生 昌 429 軸 旨 縛 69 加 旨 細 | 89 細 還 29 軸 間 題 9 納 呈 e9 
10』 0a 靖 紹 2a 7 征 42 所 06 62 店 38 | 8a 還 7O| aa 還 02| ca 34| ea 
1 0b 8 2b 敵 有 思 2b 細 還 呈 6D 軸 的 是 8b 調 間 較 2b 設 昌 昌 cb 雪 馬 時 eb 
12 | Oc 稚 2c 軸 6 4C 滑 症 間 間 GCC 滑 較 旨 較 8c 敵 還 昌 昌 ac 滑 軸 還 cc 旨 果 較 ec 
13 | 0d 6 2d 編 証 証 4d 細 昌 9 唐 6Gd 細 表 時 8d 細 症 四 2d 胃 95 還 cd 朗 角 還 ed 
14』 0Oe 46 2e 軸 78 4e 敵 計 着 Ge 細 半 細 軒 Be 紳 唐 導 昌 ae 引 委 ce 細 還 ee 
中 証 Of 瑞 語 2f 商 4f 敵 還 当 Gf 組 還 8Sf 商 症 是 af 症 明 因 cf 症 瞳 ef 
16』 10 48 30 四 80』 50 四 H2| 70 思 和 | 90 記 76| bO 胃 08| dO 40| fO 
明和 11 細 31 男 8H 51 細 訓 較 昌 /1 欄 還 91 納 症 細 b1 (6 二 昌 還 d1 紹 紅 較 f1 
18 12 50 32 82 52 114| 7/2 還 46』 92 178 b2 還 210』 d2 』242 f2 
19 13 51 33 83 53 昌 間 73 回 績 時 93 179 b3 211| d3 243 3 
20 14 52 34 84 54 軒 昌 6| 74 48』 94 180 b4 還 212| d4 』244 4 
21 15 53 35 85 55 本 間 有 | 7/5 価 語 隊 較 95 181 b5 還 213』 d5 』Z245 f5 
上 8 遇 10 36 四 86 56 男 制 l 7/6 記 50| 96 ( 還 82W b6 214| d6 思 46| f6 
923 17 潤 是 37 絹 靖 軒 57 ( 細 較 四 7/7 無明 較 97 本 明 b7 納 晒 還 d7 綴 証 較 7 
24 18 軒 56 38 88 58 120』 78 較 52| 98 184 b8 216| d8 』Z48 f8 
2 19 縛 57 証 9 四 89 症 59 記 天 | 7/9 記 絹 99 鹿 晴 | bo 吉 証 d9 紹 49 間 fo 
26 | 1a 58 3a 細 還 識 52 納 較 人 72 細 員 較 92 商人 Da 導 da 中 症 較 fa 
ge 1b 勲 59 3b 坦 還 5b 軒 記 名 /D 鉛 早 胃 9D 肖 庁 細 bb 十条 旋 db 中 舞 議 fb 
28』 1c 60 3c 軸 92 5c 舞 較 7/c 人 56 較 9c 還 br 二 較 胃 dc 中 本 時 fc 
29| 1d 四 6 3d 目 93 5d 四 25| 7d 思 5 od 所 8 bd 思 dd 衣 5 fd 
30 | 1e 肖 62| 3e 四 94| 5e 上 26| /e 四 5 9e 所 0 be 上 222| de 骨 5 fe 


回 是 1f 索 較 3「 絹 還 胃 5f 琴 較 /「 婦 凍 時 9f 十 明 較 bf 電 症 明 df 納 呈 較 ff 
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Web Safe カラ ー 

256 色 の 8 ビッ トカ ラー の うち Windows と MacintosSh の シス テム パレ ッ ト に 共通 し た 216 
色 で 、Internet Explorer と Netscape で も ほぼ 同じ よう に 表示 され る 色 を Web Safe カラ ー と 
いい ます 。 こ れ ら の 色 は 16 進数 で 表現 し た 場合 、RGB の 各 値 が 00、 33、66、99、cc、ff の 
組み 合わ せ か ら で き て いま す 。Web Safe カラ ー を 使え ば 、 た と え ユ ー ザ ー の 環境 が 256 色 表示 
で あっ て も 比較 的 問題 な く 正 し く 表 示さ れ ま す が 、 こ れ 以 外 の 色 を 使っ た 場合 は 自動 的 に ディ ザ 
リン グ 処 理 (近い 色 に 置き 換え られ る ) され る こと に な り 、 意図 し た と お り の 色 で 見 て も ら え な 
く な る 可能 性 も ある の で 注意 が 必要 で す 。 

下記 の 図 は Web Safe カラ ー を 才 fffff から #000000 の 明度 の 異な る グレ ー を 基準 に し て 色相 
環状 に 配列 し た も の で す 。 


6633 人 0 ー(#3366ff = 一 Woo99ff) 


/ N \ 
g #6600ff > て #3333ff が 〈 #0066ff 





人 #fff を 基準 と し た Web Safe カラ ー の 色相 環 
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#99cc00 
#cccc33 #66cc00 
#99cc33 
#cccc66 #66cc33 
#99cc66 
#cccc99 #66cc66 
#99cc99 
#cccccc #66cc99 #00cc66 
#cc99cc #99cccc #33cc99 * 


#9999cc #66cccc #00cc99 
に 3 ee ′ 人 
@ ミ @ ミ ニーーー 
に 
re) (Nay 
# 


0000cc 


人 #Cccccc を 基準 と し た Web Safe カラ ー の 色相 環 


#666600 
こ 湯 の ぶら 

(CTEEIU) #660000 9666633 
#990099 EEEIOT) 063333 9936633 


#339999 #006699 / ーー《#006633 
た た 1 りり リリ #003399 1 
ELUUITT) 


#000066 


#000099 


4 #999999 を 基準 と し た Web Safe カラ ー の 色相 環 


(EEEEIU 






ヽ 人 #666666 を 基準 と し た 
EEIUUU り 2 (kkiii 
330( 09 いり 3300 Web Safe カラ ー の 色相 環 
(EEEEEE1 


#330033 ケ ーー(#003333 

りり りり リリ 
届 UUU び ES 

人 人 #333333 を 基準 と し た 


Web Safe カラ ー の 色相 環 全 #O00000 
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⑯ 色 名 に よる 指定 方 法 


色 名 (colorname) に よっ て 色 を 指定 する こと も で きま す 。 こ の 場合 は <font color="red"> 
の よう に 色 名 を 値 に 直接 記入 し ます (た だ し 、 色 の 指定 は HTML で は な く ス タイ ル シ ー ト で 指定 
する こと が 推奨 され て いま す の で 、 注 意 し て 使用 する よう に し て くだ さい )。 こ の 場合 、 大 文字 小 
文字 は 問い ませ ん 。 正式 に 使用 で きる 色 は 支 印 の つい て いる 16 色 (p.341 参照 ) だ け で す が 、 そ 
れ 以 外 で ブラ ウザ が 対応 し て いる 色 も あり ます 。 


: blanchedalmond #ffebcd  r255g235b205 honeydew #fOfffO r2409255b240 





! beige 角 5f5dc T245 g245 b220 gainsboro #dcdcdc r220 g220 b220 


linen #faf0e6 r250 g240 b230 lightgrey #d3d3d3 T211 g211 b211 
oldlace #fdf5e6 r253 g245 b230 . silver #cOc0c0 r192 g192 b192 











r255 g240 b245 ! 
r255 g250 b240 
r245 g255 b250 


ghostwhite 角 8f8ff r248 q248 b255 





olivedrab リリ ゴイ 1 r107 q142 b035 





darkolivegreen  #556b2f r085 q107 b047 


forestqreen [たれ 4 フ ザイ 4 rO34 qg139 b034 


darkqreen #006400 LUUUEPUUU 有 りり リ 





#008000 LUUUEE ス りり リリ 






My 








#008080 


1ightseagreen 。 #20b2aa 
mediumaquamarine #66cdaa 
cadetblue #5f9ea0 
steelblue #4682b4 
aquamarine #7ffd4 

powderblue #0e0e6 
paleturquoise #afeeee 

lightblue #add8e6 
lightsteelblue #b0c4de 
skyblue #87ceeb 
lightskyblue #87cefa 

mediumturquoise #48d1cc 
turquotse #40e0d0 
darkturquoise #00ced1 
aqUa #00ffff 


r000 g128 b128 


LUUUEEEI リ DF 





r032 g178 b170 
r402 9205 b170 
ms atsa ble 
r070 g130 b180 
Tr127 g255 b212 
r176 g224 b230 
r175 q238 b238 
r173 g216 b230 
r176 g196 b222 
r135 qg206 b235 
r135 g206 b250 
r072 q209 b204 
r064 g224 b208 
rO000 g205 b209 


r000 g255 b255 
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し 3 


red #ff0000 r255 g000 b000 orangered #ff4500 r255 g069 b000 


orande #fa500 r255 g165 b000 


uFIKUUI #800000 r128 g000 b000 darkorange #f8c00 r255 g140 b000 


EIJI りり りり r139 g000 b000 tan #d2b48c Tr210 g180 b140 








brown #a52a2a r165 g042 b042 Peachpuff #ffdab9 r255 g218 b185 
BIIF1 #a0522d r160 g082 b045 bisque #fe4c4 r255 g228 b196 
EEUUUHUIO #8b4513 Tr139 g069 b019 moccasin 角 fe4b5 Tr255 g228 b181 
jndianred #fcd5c5c r2059g092b092 navajowhite #ffdead r255 g222 b173 
rosybrown #bc8f8f 。 r188g143b143 wheat 家 5deb3  r245g222b179 
lightcoral 角 08080 r240 g128 b128 burlywood #deb887 r222 g184 b135 
salmon #fa8072 r250 g128 b114 Wodemed 。 才 88605 84gt34501 
darksalmon #e9967a Tr233 q150 b122 goldenrod #daa520 T218 g165 b032 
coral #ff7f50 r255 g127 b080 gold #ffd700 r255 g215 b000 
載 
tomato #ff6347 r255 q099 b071 yellow ff00 r255 q255 b000 


sandybrown 角 4a460 r244 g164 b096 Iiqhtgoldenrodyellow #fafad2 r250g250b210 


lightsalmon fa07a r255 q160 b122 paleqoldenrod  #eee8aa r238 g232 b170 
Peru #cd853f 9133 b063 khaki #f0e68c r240 g230 b140 
chocolate #d2691e  r210g105b030 darkkhaki #bdb76b 189g183b107 
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plum #dda0dd r221 g160 b221 


lavender #e6e6fa r230 g230 b250 


#d8bfd8 r216 g191 b216 


I 


#da70d6 r218 g112 b214 


き 
所 


~ 宇 
き 





#ee82ee Tr238 g130 b238 
EiUUUUii LUUUE UI りり 月 げた ) indigo #4b0082 ルリ た りり 月 ゆり 


mediumblue #0000cd LUU り UI) darkmaqenta #8b008b EEIUUUD を 7) 


文 
navV #000080 r000 g000 b128 Purple 1 りり リリ r128 q000 b128 


KEI #00008b LUUUEUUU り DE)) | medi 





it #191970 r025 g025 b112 deeppink #ff1493 r255 g020 b147 


| 
ELSEIG り TH #483d8b ルリ ルリ ゆり fuchsia #ffOOff r255 q000 b255 





ECU #6a5acd r106 g090 b205 maqenta 時 fOOff r255 q000 b255 


mediumsateblue #Oe00b0 r014 g000 b176 hotpink 計 f69b4 r255 g105 b180 


palevioletred #db7093 Tr219 g112 b147 


#ffb6c1 Tr255 g182 b193 


Pink ffcOcb r255 g192 b203 


| 凡 











347 


2 APPENDIX 





ここ で は 、Web の 配色 を 考え る 際 に 参考 に な る 、 色 に 関す る 基本 的 な 知識 を 紹介 し ます 。 


@⑯ 色 の 属性 


色 の 属性 に つい て 理解 し て お く と 、 配 色 を 考え や すく な り ま す 。 色 に は 「 色 相 」「 明 度 」「 彩 度 」 
の 3 つの 属性 が あり ます 。 


色相 

白 一 灰色 一 黒 を 無 彩色 と いい 、 そ れ 以 外 の 色 を 有 彩 色 と 言い ます 。「 色 相 」 と は 、 そ れ ぞ れ の 有 
彩色 が 持つ 色合い の こと で す 。 似 た 色相 を 隣 合わ せ に 並べ て いく と 、 色 の 輪 が で きま す 。 こ れ は 
「 色 相 環 ] と 呼ば れ 、 こ の うち お お よそ 赤 一 黄 の 範囲 の 色 を 「 暖 色 」、 緑 一 青 の 範囲 の 色 を 「 寒 色 」 
と 表現 し て いま す 。 

色相 環 上 で 、 相 対す る 位置 に ある 色 を 「 補 色 ] と いい ます 。 補色 関係 に ある 2 色 を 並べ る と 、 
強い 対比 が 生じ 、 緊 張 感 の ある は っ きり し た 配色 に な り ま す 。 ま た 、 色 相 環 上 で 約 120 度 の 位置 
に ある 色 を 「 準 補色 ]」 と いい ます 。 補色 に よる 配色 で は ど ぎ つい と いう 場合 に は 、 準 補色 同士 を 
並べ る と 、 ゆ る や か な 対比 を 作る こと が で きま す 。 


洛 





人 色相 環 上 で 相対 する 位置 に ある 2 色 を 、「 補 色 関 係 に ある 色 」 と 
いい ます 
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明度 

「 明 度 」 は 色 の 明る さ の 度合 い の こ と で 、 白 か ら 黒 まで の グレ ー ス ケー ル を 基準 と し て いま す 。 
白 に 近づく ほど 明度 は 高く 、 黒 に 近づく ほど 明度 は 低く な り ま す 。 た と えば 、 赤 に 白 を 混ぜ た ビ 
ンク は 、 元 の 赤 よ り 明る い 色 ( 三 高明 度 ) で す 。 一 方 、 赤 に 黒 を 混ぜ た 茶色 は 、 元 の 赤 よ り 暗 い 
色 (一 低 明度 ) に な り ます 。 

また 、 純 色 ( 彩 度 が 最高 の 色 ) の 赤 と 黄 を グレ ー ス ケー ル に 置き 換え て みる と 、 黄 より 赤 の 方 
が 暗い 友 色 に な り ま す 。 こ の よう に 、 同 じ 彩 度 で あっ て も 、 色 相 に よっ て 明度 は 異な り ます 。 






に 
sa 
| 


ム 抑 色 の 各色 を 基準 と し た 明度 の バリ エー ショ ン 
語 これ を グレ ー ス ケー ル に 置き 換え て みる と 、 彩 度 が 同じ 
= 。。 で も 色 に よっ て 明度 が 異な る こと が わか り ま す 


/ に 
> 。 
本 


[ 


L 
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彩 度 

「 彩 度 ]」 は 色 の 鮮やか さ ( 色 み の 強 さ ) の 度合 い の こ と で 、 無 彩 色 の 彩 度 は 0 に な り ま す 。 純 色 
の 赤 に 白 や 黒 な どの 無 彩 色 を 混ぜ て いく と 、 だ ん だ ん 色 み が 薄れ て 無 彩 色 に 近づき 、 彩 度 は 低く 
な っ て いき ます 。 混色 され た 無 彩 色 の 分 量 が 少な く て 純 色 ( 彩 度 が 最高 の 色 ) に 近い ほど 色 み が 
強く 、 彩 度 は 高く な り ま す 。 





全 無 彩色 の 混色 が 少な い ほ ど 彩 度 が 高く な り ま す 。 こ の 図 で は 、 右 上 が も っ と も 彩 度 の 高い 色 で す 


⑯ 色調 (トー ン ) 





色 の 3 つの 属性 を 総合 し て 、 色 の 分 布 を 示し た 図 を 「 色 立体 ] と いい ます 。 色 立 体 の 中 か ら 、 
ある 色相 に 関す る 部 分 を 取り 出し 、 明 度 ・ 彩 度 に 応じ て 分 類する と 、1 つの 色相 内 の 色 は 次 の よう 
な 色調 (トー ン ) の グル ー プ に 分 ける こと が で きま す 。 


e 泌 手 ビビ ッ ド 

s 明 るい ブラ イト 、 ペ ー ル 、 ベ リー ペー ル 

s 地 味 ライ ト グ レ イッ シュ 、 ラ イト 、 グ レイ ッシュ 、 ダ ル 
e 暗い ディ ー プ 、 ダ ー ク 、 ダ ー ク グレ イッ シュ 


異な る 色相 の 色 を 組み 合わ せ て 配色 を 行う 際 に は 、 各 色 の 色調 を 揃え て お く と 上 手 く まとめ る 
こと が で きま す 。 
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人 へ 「 色 相 」「 明 度 」「 彩 度 ] の 関係 は 、 図 の 


よう な 色 立 体 で 表す こと が で きま す 





PPPPLLPCCLPPCLTT コ 





Y 


度 を 組み 合わ せ た 「 色 の 調子 」] を 「 色 調 (トー ン )」 


人 明度 と 彩 
と いい ます 
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3 4 ルル ( 





Web ペー ジ を みる と き 、 ま っ さき に 目 に 飛び 込ん で くる の は 、 コ ン テ ン ツ よ り も まず ペー ジ の 
「 色 ]」 で は な いで し ょ うか 。 初め て 会 う 人 の 服装 か ら 第 一 印象 が 決ま る よう に 、 私 た ち は 、 ま ず 色 
を みて Web ペー ジ の 印象 を 決定 し ます 。 作 り た い Web ペー ジ の イメ ー ジ を 明確 に し 、 効 果 的 な 
配色 を 行う こと で 、 サ イト の 主旨 が は っ きり し 、 よ り 深 く コ ン テ ン ツ を 理解 し て も ら う こと が 可 
能 に な り ま す 。 


⑯ 赤 ^ 黄 系 の 配色 


赤 一 黄 系 は 、「 暖 色 ] と 呼ば れる 色 の 系 統 で す 。 一 般 に 暖色 系 の 色 は 、 外 向 的 で 生命 や 情熱 、 親 
し さ な ど を 象徴 し ます 。 熱量 を 感じ させ 食欲 を そそ る 色 で ある た め 、 飲 食 関連 の Web ペー ジ に は 
欠か せま せん 。 

特に 赤色 は 「 淡 ]」 や 「 血 ] を 連想 させ 、 エ ネル ギー や 生命 力 に 溢れ た 色 で す 。 闘争 心 ・ 勇 気 ・ 
興奮 な ど を 伝え る 一 方 、 熱 手 や 怒り な どの 不安 定 な ニュ アン ス や 、 強 い 禁 止 を 表す た め に も 利用 
され ます 。 

黄色 は 「 光 」 を 連想 させ る 色 で ある た め 、 陽 気 で 健康 な イメ ー ジ 、 幸福 感 を 表し ます 。 ま た 金 
色 に 近い た め 、 華 や か さや 高 四 さ 、 派 手 さ を 表す 色 で も あり ます 。 

中 間 の オレ ンジ 色 は 、 赤 色 ・ 黄 色 の 両方 の 性 質 を 持っ て いま す 。 強い 主張 の 中 に 親しみ や すさ 
や 検 快感 が 加わ り 、 赤 色 よ り も や わら か い 印 象 に な り ま す 。 
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同系 色 の 配色 


















#ffff66 fff00 


補色 ・ 準 補色 と の 対比 


明度 の パリ エー ショ ン 


#O00000 #660033 #cc0066 #ffO099 #ff66cc #ff99cc #fffff 


#O00000 #660000 #cc0000 #ffO000 #ff6666 #ff9999 #Tfffff 





| 。 上 押 還 H 
し 1 : 
#O00000 #663300 #Cc3300 #ff6600 #f9966 #ffcc99 ffff 
#O00000 #666600 #cccc00 #ffff00 #ffff66 』ffff99 #Tfffff 
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(AO MO ARGO pcAOG >-AO へ 2 ) 計 fffff !Hink 










3 1 mm が ER 
ーー 較 了 eoe 


Buon Ciorno!! 





viink moo alink 


ee 時 MM : 
Ye Be mo 時 
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ek 同系 色 に よる 配色 は 、 全 体 を まとめ や すく 、 落 ち 着い た 印象 に な 
り ま す 






ep 靖 記 0 | 0 Tee 


人 補色 を 加え る と 、 ポ イン ト が 強調 され 、 躍 動 感 が 生ま れ ま す 





全高 明度 ・ 高 彩 度 の 同系 色 で まとめ る と 、 明 る く 穏 や か な 印象 に な 
り ま す 


em Re Tee 4 


人 明度 差 や 補色 を 利用 する と 、 強い 主張 が 感じ られ る よう に な り ま す 
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@⑯ 緑 ^ 青 系 の 配色 


緑 一 青 系 は 、「 寒色 ] と 呼ば れる 色 の 系 統 で す 。 暖色 に 比べ て 内 向 的 で 、 理知 や 抑制 を 象徴 し ます 。 

緑色 は 、「 植 物 ] の 色 。 草木 を 見 る と 心 が な ご むように 、 緑 色 に は 穏やか で 落ち 着い た 雰囲気 を 
作る 効果 が あり ます 。 ま た 、 新 緑 の 季 節 の よう な 清涼 感 や 、 新 鮮 な 野菜 、 自 然 界 の バラ ンス な ど 
も 連想 させ ます 。 中 唐 で 安定 し た 印象 の た め 色 自 体 の 自己 主張 は 少な く 、 ポ イン トカ ラー を 引き 
立て る ベー スカ ラー と し て 機能 する こと が 多く な っ て いま す 。 

自 然 界 の どこ で で も 目 に する よう で いて 、 実体 を 持つ 青い も の は 少な いこ と か ら 、 青 色 に は 抽 
象 的 で さま ざま な イメ ー ジ が 託さ れ ま す 。 ま すず 、「 空 ] や 「 海 ] の 色 で ある こと か ら 、 爽快 感 、 広 
が りや 永遠 、 穏 や か さ 、 神 秘 性 な ど が 連想 され ます 。 フ レッ シュ で スポ ー テ ィ な 色 で あり 、 ノ ー 
ブル 、 フ ォ ー マ ル を 象徴 し 、 憂 鬱 や 悲壮 感 を 表す こと も あり ます 。 こ の よう に イメ ー ジ に 幅 は あ 
り ま す が 、 青 色 は 理性 や 冷静 さ が 基 本 と な っ て いま す 。 
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同系 色 の 配色 





#ccff66 


補色 ・ 準 補色 と の 対比 















明度 の バリエ ーション 
3 

1 け 人 イ 

#000000 #336600 #66cc00 #99ff00 #cff66 #ccff99 #Tfffff 
* * 

#000000 #006600 #99ff99 #Tfffff 
9 の @ 
H 1 H 

#O00000 #Cc6633 #00cc66 #66ffcc #99ffcc 8ff 人 ff 
上 人 の 

#000000 #cc6666 #00cccc ) #66fff #99fff 8fffHff 











アイ 4 信 WRO が WMKA⑨ ヶ - ル D へ 2 5 9 #ccff99 bgcolor text fooeeo Hink 
Buon Ciorno!! ja viink EC alink 
ore 


Maer Car 


クル 電 RO GO AWKAD 9-AO へ 2 = EEH bgcolor 記 電 計器 呈 text #ccffcc link 
viink eff66 alink 


司 語 ぶ #fffff !altink 





玉 P9 シ フル コー Mereeft pet er 
の 6 6 め AA と 5 AS ーー #ccffff bgcolor 記 衣 text りり 中 link 


Buon Ciorno!! ee vink 製 9ee66 alink 
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章 訓 病 WE2 に | *wrwoa- フ 





6 ルッ っ つの = ゃ ッ キ て 5 間 の ピッ アテ 
半 7 の 4 ペー 2 机 プッ タカ 
上 プイ ヤバ ー ス ポル チー この リ レ グ イネ 


な に sas 


コ 6 #99ccf | Hffffff 隊 6699ff 


同系 色 に よる 配色 は 、 全 体 を まとめ や すく 、 落 ち 着 いた 印象 に な 
り ま す 











| YO WO AYA DNCWW シー ォ の D 2 


ee 敵 
区 多 佑 で 


時 
| 
『 


| ! PO) *wmoz- フ 
| ルッ コウ の ニョ > で 9 衝 7 ポ ッッ ア 


| 」 7 の ォ ペ パーカ 242 可 プッ タス カ 
| プ ィ ベース 枯 ま チー ニア ルレ グ イキ 


ロ 6 #99ccff #ffffff , 詳 代 6699 ee 
pco ee 83cccc 計 f99cc  #ccccff 


人 人 全 色相 に よる 配色 を 取り 入れ る と 、 明 る く 賑 や か な 印象 に な り ま す 

















er Me ee 
人 る 彩 度 の 高い 清 色 を 組み 合わ せる と 、 若 々 し く ス ピー ド 感 が 生ま れ 
ます 



































ee 


人 明度 ・ 彩 度 が 低く な る ほど 、 枯 れ て 地味 な 印象 に な り ま す 
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@⑯ 紫 ー 赤 紫 系 の 配色 


自然 界 に 少な い 和 紫色 は 、 古 来 より 神秘 性 や 非 日 常 性 、 高 貢 さ を 表す 色 と し て 扱わ れ て きま し た 。 
権力 を 象徴 し 、 退 廃 や 畑 熟 、 病 的 、 狂 気 を 表す 色 で も あり ます 。 高級 感 や 気品 、 優 雅 さ 、 華 瑞 な 
ど 、 大 人 っ ぽく 色気 の ある イメ ー ジ を 持ち ます が 、 多 用 し すぎ る と 、 反 対 に 下品 、 陰 気 、 派 手 、 
くど い 、 怪 し いな どの マイ ナス イメ ー ジ を 作る こと に な る の で 注意 が 必要 で す 。 紫 色 の 中 で も 、 
赤み の 深い ワイ ン 色 な ど は 豊か な 実り を 連想 させ ます が 、 明 る く 派 手 な 紫色 は 食品 関連 で は 好ま 
れ ま せん 。 
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同系 色 の 配色 


#6699ff #0066ff #0033ff 上: よ た 1.1 [ve #0066cc #0033cc 


#6666ff EiUUUUiI IIUU : よ た た た 1d UIUUa また 1 りり cd 


#9966ff UDG トト た 1< コ #6600cc #9900cc 





#ff66 作 #ffOOff #fOOcc #Cc33cc 





補色 ・ 準 補色 と の 対比 


#0066ff ff9900 #ccff00 #ff0000 
ー 


AUUUUII #ffff00 





二 







明度 の バリ エー ショ ン 
9 @ し 
: H 
( #003366 0033cc #0066ff #6699ff #99ccf #ffffff 
9 
H 1 


#000066 #0000cc #0000ff #6666ff cf MTffff 





* * 

#O00000 #330066 #6600cc #9900ff #cc66ff #cc99ff #ff 作 ff 
7 e e e e 
2 : ! : H 

#O00000 #660066 #cc00cc #ffOOff #Tf66ff #ff99ff #ff 作 ff 
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に #ccffff text me 
Buon Ciornol! #99cecc vink ES atink 


bgcolor 狼 fcccc text eo ink 
に 2 9 2 le 


alink 


dog に 0 し 1 
ee Le oe 











#6600cc ea #6633cc ee 


人 白地 に よっ て 、 す っ きり し た 印象 に な り ま す 


lo93399 


全 紫 系 の 同系 色 で 明度 差 の な い 配色 は 、 重 苦し い 感 じ に な り ま す 











全高 明度 の 配色 は 、 広 い 色相 を 取り 入れ や すく な り ま す 











全 純 色 に 近い 色調 で 広い 色相 を 用 いる と 、 雑 然 と し た 印象 に な りや 
すく な り ま す 
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⑯ 濃 暗 色 系 の 配色 


濃 暗 色 は 、 彩 度 や 明度 が 低い 色 で す 。 彩 度 ・ 明 度 に よっ て 「 ダ ー ク 系 ]「 ダ ル 系 ] 「 グ レイ ッ シ 
ュ 系 」 な ど に 分 類 さ れ ま す 。 濃 暗色 系 の 中 で も 、 彩 度 ・ 明 度 が 比較 的 高い 、 や や くす ん だ 感じ の 
色 は 、 自 然 界 で 目 に する こと の 多い 色調 で ある た め 、「 ア ー ス カラ ー」 と も 呼ば れ ます 。 

濃 暗色 の 配色 は 、 一 般 に 重く 鈍い 印象 を 与え ます 。 主 に 男性 的 で 年 齢 層 の 高い 印象 の 色 で 、 重 
厚 ・ 渋 み ・ 伝 統 な どの イメ ー ジ を 伝え る 場合 に は 欠か せま せん 。 一 方 、 配 色 に よっ て は 、 暗 い ・ 
寂し い ・ 地 味 な どの マイ ナス イメ ー ジ を 作る こと に も な り ま す 。 ま た 、 彩 度 ・ 明 度 が 低く な る ほ 
ど 無 機 的 な 印象 に な る た め 、 モ ノ ト ー ン 系 の 性 格 も 含 お よう に な り ま す 。 
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ee 


同系 色 の 配色 


3 り よ よ ま よ 】 #660000 リナ た 】 り リリ [ よ ナ よ よ よ ト 1 だ より リリ リリ #996600 


#666633 1 よ よ ) り リリ #O06600 





た た 1 1 #006666 #003366 #003399 


また た た 1" まま 1 りり りり #660066 #996699 #660099 リリ リリ 





補色 ・ 準 補色 と の 対比 


iiU り りり #006666 りり リリ リ #006633 


#660000 #003366 


た また 1 りり り ロ #006600 





りり よ た 1 り | リ #330066 中 た よ 1 り リ りり りり りり は り よ よ 1 り リ #660066 


りり 1 #660000 #006666 #660033 #006666 は り よ ま ) り り 





#330066 は リト ト ) リ ロリ まま ) り リリ #666600 


明度 の パリ エー ショ ン 





#330000 #660000 #cc9999 #Tffff 


i 濁 





#333300 #663300 #cc9999 fffff 





し @ 
* 
8 『! H 
#000000 #003333 #006666 #99cccc #fffffF 





#000000 #330033 #330066 #9999cc #ffffff 
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om #ffcccc text 拓 f6666| iink 


Buon Ciornol!! 首 f9999 viink  #c 左 66 alink 





4009 bgcolor ffffff 'text 導 fec00 link 


#cccc99 viink fff00 alink 








1 bgcolor #ccccff text 胡 f99cc iink 
Buon Ciorno!! #cc99ff viink po 





bgcolor | 引 #ccff99 link 


#99cc99 viink 人: | ahimk 
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また 1 りり 1 11 OUUUUU EE た りり 1 


全 彩 度 が 高く 、 明 度 が 低い 配色 は 、 円 悪 し た 雰囲気 を 作り ます 





























りり.』 #99cccc Me また 1] よ た 】 5 た たよ た し) 
1) 員 
Ne Pee 


彩 度 ・ 低 明度 の 色 を 、 補 色 に 近い 対比 で 組み 合わ せる と 、 和 風 
聞こ の 








#666699 : た たよ た トト トリ 
#669999 


全 青 系 の 暗色 に は 、 一 般 に 男性 的 な イメ ー ジ が あり ます 













1 ム や や くす ん だ 色調 の アー スカ ラー に よる 配色 は 、 好 感度 が 高く や 


わら か い 印 象 を 与え ます 
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⑯ 淡 明 色 系 の 配色 


淡 明 色 系 は 、 濃 暗色 系 と は 反対 に 、 彩 度 や 明度 が 高い 色 で す 。 彩 度 ・ 明 度 に よっ て 「 ラ イト 系 ] 
「 ペ ー ル 系 」 「 ラ イト グレ イッ シュ 系 」 な ど に 分 類 さ れ ま す 。 淡 明 色 系 の 中 で 彩 度 ・ 明 度 が 比較 的 
低い 色 も 、「 ア ー ス カラ ー」 に 含ま れ ま す 。 

淡 明 色 系 の 配色 は 、 軽 や か で 柔らか い 印 象 を 与え 、 女 性 に 好ま れる 色調 で す 。 明度 が 非常 に 高 
く 白 に 近い ベー ジュ な どの 色 は 、 個 性 は 少な いも の の 、 安 心 感 が め っ て 受け 入れ られ や すく 、 上 
品 で や さ し い 印象 を 作る こと が で きま す 。 一 方 、 淡 明 色 だ け で コン トラ スト の 少な い 配 色 は 、 
弱 々 し く あ いま いな 印象 に も な り ま す 。 





368 上 上 





同系 色 の 配色 





補色 ・ 準 補色 と の 対比 


mm … 











明度 の パリ エー ショ ン 


#ccc99 #ffff99 #ffffcc fffff 





#99cccc Afffff 
の 

#9999cc #Tffff 
@ 

#Cc99cc #ffffff 















人 彩 度 ・ 明 度 の 高い 色 と 昨 を 組み 合わ せる と 、 若 々 し い 印 象 に な り 


ます 





全 彩 度 が 低く 、 明 度 の 高い 配色 は 、 や わら か く 落 ち 着い た 印象 に な 
り ま す 





sl 1 | 


全 淡 明 色 系 の 配色 は 、 明 る く 女 性 的 な イメ ー ジ を 作る こと が で きま す 






豆 m 加 … 回 


人 る 彩 度 が 低く 、 明 度 差 の 少な い 配色 は 、 あ いま いで の ん びり と し た 
雰囲気 に な り ま す 





人 モノ トー ン の 配色 


無 彩 色 の 白 ・ 黒 ・ グ レー は ニュ ー ト ラル な 色 な の で 、 ど ん な 色 と で も 組み 合わ せる こと が で き 、 
配色 に よっ て 印象 が 変わ り ま す 。 有 彩色 を 加え な い モ ノ トー ン の 配色 は 、 モ ダン で 大 人 っ ぽい イ 
メー ジ に な り ま す が 、 バ ラン ス に よっ て は 暗く 守 々 し い 印 象 を 与え る こと に も な る の で 注意 が 必 
要 で す 。 

単色 の 場合 、 白 は 清潔 ・ 清 部 ・ 稼 れ が な い ・ 供 いな どの キー ワー ド を 連想 させ ます が 、 基 本 的 
に マイ ナス イメ ー ジ は 少な い 色 で す 。 反対 に 、 黒 は 夜 ・ 暗 闇 ・ 恐 怖 ・ 死 ・ 絶 望 な ど 不吉 な も の を 
象徴 する 一 方 、 洗 練 さ れ て シャ ー プ な 印象 を 与え る 色 で も あり ます 。 グ レー も シッ ク で 落ち 着い 
た 印象 の 色 で す が 、 使 い 方 に よっ て は 地味 で 陰気 な イメ ー ジ と な り ま す 。 


明度 の パリ エー ショ ン 





#O00000 #333333 #666666 #999999 #ccccc ffff 
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#ffffff .bgcolor 記 穫 3 text Ei りり りり iink 


Buon Ciorno! #899999 viink  #fcccccc alink 


#cccccc bgcolor 本 計り di text EEUU り 1 ink 
Buon Ciorno!! に 回 


1 bgcolor #ccc99 text fee mw 
Buon Giorno!! #ffffcc vink 本 還 me 


り りり りり 月 bcolor #99cc99 text 語 思 
#ccffcc viink 語 計 
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909 上 HL】 | #ffffff : #cccccc 


人 人 無 彩色 に よる 配色 は 、 寒 々 し い 印 象 に な る こと が あり ます 











Primo Platto 


1 11111] 記 り UUU り l #cccccc 


全 黒 を 基本 色 と す る と 、 強 い 主張 が 感じ られ る よう に な り ま す 








Me 5o66666 


全 モ ノ ト ー ン の 配色 は 、 有 彩色 と の 組み 合わ せ に よっ て 印象 が 変化 
し ます 


eee *G66666 49 


人 補色 の 間 に 無 彩色 を 置く と 、 す っ きり し た 対比 に な り ま す 









4 APPENDIX 





Web ペー ジ ビ ジ ュ ア ルイ ン デ ックス で は 、 本 書 に 掲載 し て いる HTML タグ を 利用 し た グラ フ 
ィ カ ル な サン プル ペー ジ を ご 紹介 し ます 。 

イン デック ス に な っ て いま す の で 、 気 に な る タグ の 使い 方 を 本 書 の 本 文 で すぐ に 調べ る こと が 
で きま す 。 


@ HTML4.01 の 規格 に 準拠 し た ペー ジ 


HTML4.01 の 規格 に 治っ た ペー ジ で す 。 で きる だ け タ グ 本 来 の 仕様 に 基づい て 作ら れ て いま す 。 


ee 
得 : ロ カス eo 

3 アラ ピカ 電 (cofee 

Th 

の ビ 7 栖 ロブ スタ 幸 の 時 ⑨ 

人 し 

ロブ スタ 栖 か 。 よ 品 | し ギュ ラー コー ヒー 

人 ダ ン コ タ コー ビー 


gCOYfEE の 寺 条 厚 
⑨ 


F い 生 吾 の 条 伯 と は 的 が 6 一 で ある こと で す 。 サイ ズ - 珍 厚み ・ 色 革 、 で きる だ け 代 た も の を 所 え る こと で 話 朋 し や すい あら で す 。 また ゼン タ 
サー ジー Gy 
に し て いも も の に お の 2u の 42 ちあ り ます 。 その た の 有人 で 守 する 本 は きじ る こと も みい て し 4 う . 和 間 は か か り まず が [所 た も の と 


の の % 
る だ げ 完 陣 た 包 . 生 豆 を 使い まし ょ う 。 


COFFEE 語 | ha 1 3 叶 | sc 










<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN" 
"http://Www.w3.orq/TR/html4/loose.dtd"> 


















<htm> 








<head> 
<meta name="keywords" content="coffee, コ ー ヒ ー, 珈 琲 "> 
<meta name="description" content="about coffee"> 
<meta http-equiv="content-type" content="text/htmb charset=shift_jis"> 
<title>COFFEE PLACE</title>- 
<Hink rel="index" href= "index.htm"> 
<link re="next" href="howtomake.html"> 

</head> 























ビジ ュ ア ルイ ン デ ックス 375 


376 























<body> p.20 

<h1>COFFEE PLACE</h1> p.38 

<big><b>take a bleak</b></big> .106,108 

<h2>COFFEE 豆 </h2> 

お いし い COFFEE を 入れ る た め に 生 豆 が 良質 な も の で ある こと が 重要 で す 。 

<hr> p.92 

<d に .124 
<dt><big><b>COFFEE 豆 ・ 目 次 </b></big></dt> 
<dd> <a href="#syurui"> 生 豆 の 種類 </a></dd> DP.148 
<dd><a href="#tokucho"> 生 豆 の 特長 </a></dd> 

</d に 

<hr> 

<br> 

<a name="sVurui"><strong> 生 豆 の 種類 </strong></a> 

<o> .115 





<li><f> リ ベ リ カ 種 (coffee liberica) </j></l1> 
<li> ロブ スタ 種 (coffee robusta) </i> 
<li> アラ ビ カ 種 (coffee arabica) </li> 

</o> 














<small> ※ 上 記 の うち り べ リカ 種 は 現在 あま り 生産 され て いま せん 。</small><br> .42 
<a name="tokucho"><stronq> 生 豆 の 特長 </strong></a> 
<table border="1" cellspacing="1" cellpadding="1"> .200, 219 
<caption> アラ ビ カ 種 ヒロ ブス タ 種 の 比較 </caption> P.214 
<tr> P.196 
<th> 種類 </th><th> 酸味 </th><th> 香り </th><th> 生産 量 </th><th> 価格 </th><th> 用 途 </th> .198 
</tr> 
<tr> 
<td><b> ロブ スタ 種 </b></td> 
<td align="center"> 豊か </td><td align="center"> 上 品 </td> p.216 





<td align="center"> 多い </td><td aign="center"> 安い </td> 
<td align="center"> レギ ュ ラ ー コ ー ヒ ー </td> 
</tr> 
<tr> 
<td><b> アラ ビ カ 種 </b></td> 
<td align="center"> な し </td><td align="center"> 独特 で 強い </td> 
<td align="center"> 少な い </td><td align="center"> 高い </td> 
<td aiqgn="center"> イ ンス タン トコ ー ヒ ー な ど </td> 
</t> 
</table> 
<br> 


<P><em> 較 COFFEE 豆 の 選別 画 </em><br> .40, 54 
=img src="image/iU01.gif" width="164" height="123" att=" イ ラス ト "> 130 
よい 生 豆 の 条件 と は 粒 が 均一 で ある こと で す 。 サ イズ ・ 形 ・ 厚 み ・ 色 等 、 で きる だ け 似 た も の を 揃え る 
こと で 矯 煎 し や すい か ら で す 。 ま た セン ター カッ ト が まん 中 に まっ すぐ ある と いう こと も 重要 で す 。<br> 
し か し …… (中 略 ) …… 違っ て きま す 。<br> 
で きる だ け 完 熟し た 新しい 生 豆 を 使い まし ょ う 。<br> 
</p> 








<hr> 

COFFEE 豆 | <ahrefs"./howtomake/index.htmt"> お いし い COFFEE の 入れ 方 </a> .10,146 
| <a href="../utendi/utenciLhtml">COFFEE 鶴 具 </a> 
| <a href="../shop/shop.html">SHOP</a> | <ahref="../index.html">HOME</a> 


</body> 


</html> 











フレ ー ム を 利用 
フレ ー ム 機能 を 利用 する と 、 ひ と つの ブラ ウザ を 複数 の ウィ ンド ウ に 区 切る こと が で きま す 。 





ここ で は フレ ー ム を 2 分 割 し て いま す 。 


il fl intern 
アル 建 生 ) 表示 お に 入 0⑯ ツーMD へ ルプ 
いい いい いい NN いい NN いい NN いい NNN いて WW 


COFFEE PLACE 


公 回 上 回 本 回 碧 回 各 邊 
NNNNNNNNNNNNNNNNNN へ NMM いて へ 





お いし い COFFEE の 入れ 方 | 
Poinr 
1 よい 合う こと 
= 浄水 話 を 使っ た も の 
。 ・7 総 理 の され て いな い 市 販 の ミネ 
『 ラル ウォ ー タ ー な ど 
ブ 革 本 で 百 を 使う こと 


* よい 生 豆 
= 正しく 震動 され 保 窟 さ れ に た も の 


= 俗 船 か ら 時 間 が た っ て いな いも の 


3 し い 給 出 を する ご と 
メッ シュ や 矯 前 に 合っ た 抽出 器具 


・ 正 し ん. 温度 の お 湯 





AAEAo 
お いし い COFFEE き 入れ る た め に | は か いる 重幸 入れ る こと が た いせ つ で す 。 旭 め 
下す た び 、 称 は 秀 化 し て いき ます 。 コー ヒー メー カー ゼ ど 、 も と も と 住 季語 居 が つい て いる に 





フレ ー ム セッ ト 
フレ ー ム の 使用 を 定義 むせ する ファ イル で す 。 こ の ファ イル を 読み 込む と 、 指 定 し た menu.html 


と howto.html が それ ぞ れ の フレ ー ム に 表示 され ます 。 
p.16 








<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" 
"http://www.w3.org/TR/html4/framesetdtd"> 


<htm> 
<head> 

<title>COFFEE PLACE</title> 

<meta http-equiv="content-type" content="text/htmk charset=shift_jis"> 


</head> 
<frame name="menu" src="menu.htmU"' marginheight="150" scrolling="no" noresize> ーー 本 p.258, 252 
Tp.262, 252 





<frameset cols="180,*" frameborder="0" border="0"> 
<frame name="main' src="howto.html" scrolling="auto"> 
p.266 


</frameset> 


。<noframes> 
<body bgcolor="#ffffff"> 
この ペー ジ は フレ ー ム 機能 が な い ブ ラウ ザ で は 見 られ ませ ん 。 








</body> 


</noframes> 
</html> 
NN NM 0 277 








左 の ウィ ンド ウ に 表示 され る ファ イル ーー menu.html 
フレ ー ム の 左側 の ウィ ンド ウ に 表示 され る ファ イル で す 。 こ の ウィ ン 
ドウ で リン ク を クリ ッ ク す る と 、 右 側 の ウィ ンド ウ に リン ク 先 が 表示 さ 


れ ま す 。 








<htm> 


<head> 

<title> 左 フ レー ム </title> 

<meta http-equiv="content-type" content="text/htmL charset=shift_jis"> 
</head> 





<body bgcolor="#999966" backqround="image/menu_bkg.gif"> 


P.74 





<center> 


<!-- 画 像 を 配置 する た め の レ イア ウト テー ブル ここ か ら ++ ャ ャ ャ ャ ネ ャ キャ キャ キキ すす すす キキ キキ キキ キキ オキ オオ ーー 
=table border="0" cellspacing="1" cellpadding="1"> 
<tr> 


p.90 





<td aign="rght" valign="middle"> 
<a href="./beans/beans.html" target="main"> 
<img src="image/menu01.gif" width="74" height="11" alt="COFFEE 豆 " border="0"></a> 
</td> 
<td align="center" vaign="middle"> 
<a href="../beans/beans.html" target="main"> 
<img src="1mage/m_icon.gif" width="18" height="22" vspace="10" border="0" alt=""></a> 
</td> 
</tr> 
<tr> 
<td align="right" valign="middle"> 
<1mq src= "image/menu02.qif" width="123" height="26" alt=" お いし い COFFEE の 入れ 方 " border="0"> 
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P.216 








</td> 
<td align="center" valign="middle"> 
<imq src="image/m_icon.gif" width="19" height="22" vspace="10"> 
</td> 
</tr> 
<tr> 
<td align="right" vatign="middle"> 
<a href"../utindi/utinciLhtml" tarqet="main"> 
<img src="1mage/menu03.gif" width="86" height="11" alt="COFFEE 器 具 " border="0">=</a= 
</td> 
<td align="center" valign="middle"> 
<a href="../utinci!/utinciLhtml" target="main"> 
<imq src="1mage/m_icon.gif" width="19" height="22" vspace="10" border="0"></a> 
</td> 
マ /tr> 
<tr> 
<td aign="right" valign="middle"> 
<a href="../shop/shop.html" target="main"> 
<imq src= "1mage/menu04.gif" width="37" height="11" alt="SHOP" border="0"></a> 
</td> 
<td align="center" valign="middle"> 
<a href="../shop/shop.html" target="main"> 
<img src="1mage/m_icon.gif" width="19" height="22" vspace="10" border="0"></a> 
</td> 
</tr> 
<tr> 
<td align="right" valign="middle"> 
<a href="../index.html" target="_top"> 
<img src="1mage/menu05.gif" width="46" height="12" alt="HOME" border="0"></a> 
</td> 
<td aign="center" valign="middle"> 
<a href="../index.html" target="_top"> 
<img src="1mage/m_icon.gif" width="19" height="22" vspace="20" border="0"></a> 
</td> 
</r> 
</table> 
<!-- 画 像 を 配置 する た め の レ イア ウト テー ブル ここ ま で +++ キ ネネ キキ キキ キキ す キキ キキ キキ キキ キキ キキ キキ キキ キキ キキ キキ ーー 
</center> 





</body> 


</htm 





.10,156 





右 の ウィ ンド ウ に 表示 され る ファ イル ーー-howto.html 


フレ ー ム の 右側 の ウィ ンド ウ に 表示 され る ファ イル で す 。3 つの テー ブル を 使っ て 全体 が レイ ア 


ウト され て いま す 。 


て 


COFFEE PLACE 
g 回 旬 回 加 回 回 回 回 還 


@ ぉ uCoCorree の At 馬 ) 
PoINT 010〔nt〔{[ 
1 よい 水 を 使う こと 


= 浄水 器 を 使っ た も の 
っ = 加熱 灯 画 処理 の され て いな い 市 販 の ミネ 
| ラル ウォ ー タ ー な ど 





フ 新 親 な 理 を 使う こと 
* よい 生 豆 
・ 正しく < 類 煎 され 保管 され た も の 
= 燈 煎 か ら 時 間 が た っ て いな いも の 


3 正しい 失 出 を する こと 


= メッ シュ や 冶 煎 に 合っ た 抽出 器具 
* 正しい 温度 の お 湯 











お いし い COFFEE を 入れ る た め に は 、 就 み 切れ 入れ る こと が た いせ つ で す 。 過 め 次 
下す た び 遇 は 孝 伯 し てい きま す 。 コー ヒー メー カー な ど 、 も と も と 介 笑 軒 が つい て いる 生 














<html> 


<head> 
<title> 右 フ レー ム </title> 
<meta http-equiv="content-type" content="text/htm charset=shift jis"> 
</head> 
<body bgcolor="#ffffff"> 
<center> 


<!- タ イト ル 画 像 の レイ アウ ト テ ー ブ ル ここ か ら --> 


<tr> 
<td valign="middle"> 


⑲ <table width="450" borders"0" cellspacing="1" cellpadding="1"> ーー 


196, 219 





</td> 
<td align="right"> 
<img src= "image/ill01.gif" width="104" height="149" alt=" イ ラス トリ "> 
</td> 
</tr> 
</table> 
<!-- タ イト ル 画 像 の レイ アウ ト テ ー ブ ル ここ まで > 


<br> 





<1mg src="image/title.gif" width="326" height="110" alt="COFFEE PLACE"> 


p.216 
p.126 





0 人 間 Mililii ii 
OO 








<!-- メ イン 部 分 の レイ アウ ト テ ー ブ ル ここ か ら ー> 
<table border="0" cellspacing="5" cellpadding="1" width="522"> 
<tr><td colspan="2"> 
<img src="1mage/header01.gif" width="264" height="35" alt=" お いし い coffee の 入れ 方 "> 
</td></tr> 
<tr> 
<td rowspan="8" aign="center"> p.236 
<imq src="image/photo01.jpg" width="186" height="234" alt="photo"> <!- コ ー ビ ー の 写真 --> 
</td> 
<td><img src="1mage/header02.gif" width="321" height="18" alt="POINT"> </td> 
</tr> 
<tr><td> 
<img src= "1mage/header02s_01.gif" width="117" height="15" alt="1 よ い 水 "> 
</td></tr> 
<tr><td> 
<ul type="square"> p.116 
<li> 浄水 器 を 使っ た も の </li> P.114 
<li> 加熱 殺菌 処理 の され て いな い 市 販 の ミネ ラル ウォ ー タ ー な ど </li> 
</u> 
</td></tr> 
<tr><td> 
<img src="1mage/header02s_02.gif" width="133" height="15" alt="2 新 鮮 な 豆 "> 
</td></tr> 
<tr><td> 
<ul type="square"> 
<li> よい 生 豆 </l> 
<li> 正しく 始 煎 、 保 管 さ れ た も の </i> 
<li> 千 煎 か ら 時 間 が た っ て いな いも の </> 
</ul> 
</td></tr> 
<tr><td> 
<img src= "1mage/header02s_03.gif" width="147" height="15" alt="3 正しい 抽出 "> 
</td></tr> M 
<tr> <td> 
<ul type="square"> 
<li> メッ シュ や 始 煎 に 合っ た 抽出 器具 </li> 
<li> 正しい 温度 の お 湯 </li> 
</ul> 
</td></tr> 
</table> 
<!- メ イン 部 分 の レイ アウ ト テ ー ブ ル ここ まで > 














<br> 
<!-- イ ン ラ イン フレ ー ム 部 分 の レイ アウ ト テ ー ブ ル ここ か ら ー> 
<table border="0" cellspacing="5" cellpadding="1" width="522"> 
<tr><td> 
<img src= "image/header03.gif" width="512" height="18" alt="MEMO"> 
</td></tr> 
<tr><td> 
<iframe src="memo.html" widths"512" height="40"> この ペー ジ で は イン ライ ン フ レー ム を 一 十 一 p.268 
使っ て いま す 。</iframe> 
</td></tr> 
</table> 
<!- イ ン ラ イン フレ ー ム 部 分 の レイ アウ ト テ ー ブ ル ここ まで --> 


</center> 


</body> 





</html> 
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人 る フォ ー ム を 利用 し た ペー ジ 


アン ケー ト や 住所 登録 な ど 、 フ ォ ー ム を 利用 する と 、 ユ ー ザ ー と の ダイ レク ト な や り と り が 可 
能 に な り ま す 。 


アル の 環 人 CD 表示 ⑰ お 気 に 和 0QO ウー ル D へ 2 





(Cmmpurer (irap 因 


この フォ ー ム で 登録 を 済ま せる と - 
ント を . 毎月 メー ル に て お 0 ら せ し H に 3 人 は か 
か り ま せん ぜひ お 中 し 込み 

きり お ここ で 表 本 され た * こ と は まで 


加 が 玩 了 す る と 、 時 込み いた だ いた アド レス に 電 陣 の メー ル が き ます 、 その 内 容 を ご 
に な っ て 、 正しい 全 較 が 登録 れ た か ご 紅く だ さい 。 


@ あ な た の /( ソ コン 概 を お し えて くだ さい 
約 年 ヶ月 

で よ くむ 中 は の 分 時 を 者 えて くだ さい ( 問 和 

口 パソ コン ・ イ ンタ ー ネ ッ ント 関連 口 デザ イン 関連 口 ファ ッ ョ ン 関 連 
曲 スポ ー ツ 関連 口 旅行 関連 口 情報 結 間 連 


「2) の 財 具 の ある こと は 何で すか て ( 具 は 


@ こ の ネー ムーー ジ の ご 生 肝 を ち 還 か せく だ さい 





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona//EN"> 
<html> 
<head> 


<title>Computer Graphic Conference : 会 員 登録 </title> 
<meta http-equiv="Content-Type" content="text/htm charset=Shift_JIS"> 











</head> 
<body bgcolor="#ffffff" text="#333333" marginheight="0" topmarqin="0" nk="#333333" 
Vlink="#6699cc" alink="#00ccff"> p.96 
<center> p.90 








<!- タ イト ル ヘ ッ ダ 部 分 の レイ アウ ト テ ー ブ ル (入れ 子 3 テー ブル ) ここ か ら ++++++ ネ キネ キキ キキ キキ キキ ーー テ 
<table width="640" border="0" CSpecfogei0/ cellpadding="0"> 
<tr><td align="right"> 





<table border="0" cellspacing="0" cellpadding="0"> 
<tr><td align="right"> 
<1mg src="image/logo.gif" width="371" height="72" alt="Computer Graphic Conference"> 
</td></tr> 
<tr><td bgcolor="#999999"> 
<table width="440" border="0" cellspacing="1" cellpadding="1"> 
<tr> 
<td align="center" bgcolor="#eeeeee"> 
<font size="2"><a href="topics.html"> トピ ックス </a></font> 
</td> 
<td align="center" bgcolor="#eeeeee"> 
<font size="2"><a href="contents.html"> 活動 内 容 </a></font> 
</td> 
<td align="center" bgcolor="#eeeeee"> 
<font size="2"><a href="schedule.htm"> スケジュ ー ル </a></font> 
</td> 
<td align="center" bgcolor="#eeeeee"> 
<font size="2"><a href="speaker.html"> 講師 </a></font> 
</td> 
<td align="center" bgcolor="#eeeeee"><font size="2"> 会 員 登録 </font></td> 
<td align="center" bgcolor="#eeeeee"> 
<font size="2"><a href="profile.htmU">CGC 概要 </a></font> 
</td> 
</tr> 
</table> 
</td></tr> 
<tr><td aiign="right"> 
<a href="login/index.html"><font size="2" color="#ff6600"> 会 員 LOG IN</font></a> 
</td></tr> 
</table> 
</td></tr> 
</table> 
<!-- タ イト ル ヘ ッ ダ 部 分 の レイ アウ ト テ ー ブ ル (入れ 子 3 テー ブル ) ここ まで ++++ ャ + ャ す ャ ネネ すす も すす る サ ーー シ 








<br> 

<img src="1mage/title.gif" width="500" height="50" alt=" 会 員 登録 "> 

<br> 

<!-- メ イン タイ トル の レイ アウ ト テ ー ブ ル ここ か ら ー> 

=table width="500" borders"0" cellspacing="1" cellpadding="1" bqcolor=" 38399ff"> 
<tr><td align="center" bgcolor="#ffffff"> 

<b><font color="#0066ff" size="2"> 一 アン ケー ト に お 答え くだ さい ー </font></b> 

</td></tT> 

</table> 

<!- メ イン タイ トル の レイ アウ ト テ ー ブ ル こ 

<br> 


で 一 > 








<!-- メ イン テキ スト の レイ アウ ト テ ー ブ ル ここ か ら …> 
<table width="500" border="0" cellspacing="0" cellpadding="1"> 
<tr> <td> 
この フォ ー ム で 登録 を 済ま せる と 、CGC で お こ な っ て いる 最新 情報 や イベ ント を 、 毎 月 メー ル に て 
お 知ら せ し ま す 。 登録 お よび ご 利用 に 一 切 お 金 は か か り ま せん 。 ぜ ひ お 申し 込み くだ さい 。 
</td></tr> 
<tr><td align="center"> 
<font sizes"2" color="#ff6633"> ※ な お 、 こ てこ て で 登録 され た ブラ イベ ー ト な 情報 は 、 外 部 に 出る 
) こと は あり ませ ん 。</font> 





</td></tr> 
<tr><td> </td></r> 
<tr><td> 
<font size="2"> 登録 が 完了 する と 、 申 込み いた だ いた アド レス に 確認 の メー ル が 届き ます 。 
その 内 容 を ご 覧 に な っ て 、 正 し い 情 報 が 登録 され た か ご 確認 くだ さい 。</font> 


| 
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</td></tr> 
<tr> <td> </td></tr> 
<tr> <td><hr size="1"></td></tr> 
</table> 
<!- メ イン テキ スト の レイ アウ ト テ ー ブ ル ここ まで --> 
<form method="post" action="cgi-bin/form.cgi"> p.160 
<!-- フ ォ ー ム 部 分 の レイ アウ ト テ ー ブ ル ここ が ら +++++ ネ キャ キャ すそ すす すそ すす すす キネ す キキ キキ キキ キキ キキ キキ キネ ネオ ーー 
<table border="0" cellspacing="0" cellpadding="0"> 
<tr> <td> 
<font color="#0066ff" size="2"><b> 人 あ な た の バ ソ コン 歴 を お し えて くだ さい </b></font> 
</td></tr> 
<tr><td> 
約 <input type="text" name="q101" size="4" maxlength="2"> 年 
<input type="text" name="q102" size="4" maxlength="2"> ヶ月 
</td></tr> 
<tr><td> </td></tr> 
<tr><td> 
<font color="#0066ff" size="2"><b> 人 @ よ く 読 む 準 誌 の 分 野 を 教え て くだ さい </b> (複数 回 答 可 ) </font> 
</td></tr> 
<tr> <td> 
<input type="checkbox" name="q2" value="computer"> バ ソ コン - イン ター ネッ ト 関 連 一 一 十 一 p.182 
<input type="checkbox" name="q2" value="desiqgn "> デザ イン 関連 
<input type="checkbox" name="q2" value="fashion"> ファ ッ シ ョ ン 関 連 <br> 
<input type="checkbox" name="q2" values"sports"> スポ ー ツ 関連 
<input type="checkbox" name="q2" value="travel"> 旅行 関連 
<input type="checkbox" name="q2" value="information"> 情報 誌 関連 
</td></tr> 
<tr><td> </td></tr> 
<tr><td> 
<font color="#0066ff" size="2"><b> 倫 今 、 興 味 の あ る こと は 何で すか ? </b> (具体 的 に ) </font> 
</td></tr> 
<tr><td> 
<input type="text" name="q3" sizes"70"> P.174 
</td></tr> 
<tr><td> </td></tr> 
<tr><td> 
<font color="#0066ff" size="2"><b> 信 こ の ホー ムペ ー ジ の ご 感想 を お 聞か せく だ さい </b></font> 
</td></tr> 
<tr> <td> 
<textarea name="q4" rows="5" cols="70"> </textarea> ーーーーーーーーーーーーーーーーー サ ーーDp.176 
</td></tr> 
<tr><td> </td></tr> 
<tr><td align="center"> 
<!-- フ ォ ー ム 内 の テー ブル ここ か ら --> 
<table border="0" cellspacing="1" cellpadding="2" bgcolor="#0033ff"> 
<tr> 
<td align="right" bgcolor="#99ccff" nowrap> お 名 前 : </td> 
<td bgcolor="#ffffff"><input type="text" name="yname"></td> 
</tr> 
<tr> 
<td align="right" nowrap bgcolor="#99ccff"> ふり が な : </td> 
<td bgcolor="#ffffff"><input type="text" name="namef"></td> 
</tr> 
<tr> 
<td align="right" nowrap bgcolor="#99ccff"> メー ル ア ド レス : </td> ( 











⑳⑱_ 





<td bgcolor="#Tfffff"><input type="text" name="yadd" size="35"></td> 
</tr> 
<tr> 
<td align="right" nowrap bgcolor="#99ccff"> 生年 月 日 (西暦 ) : </td> 
<td bgcolor=" 計 fffff"> 


364 「 3 Red 
ーーー へ 





<input type="text" name="yyear" size="6" maxlength="4"><font size="2"> 年 </font> 
<input type="text" name="ymonth" size="4" maxlength="2"><font size="2"> 月 </font> 
<input type="text" name="yday" size="4" maxlength="2"><font size="2"> 日 </font> 




















</td> 
</tr> 
<tr> 
<td align="right" bgcolor="#99ccff" nowrap> 性 別 : </td> 
<td bgcolor="#ffffff"> 
<input type="radio" name="ysex" value="man"> 男 p.180 
<input type="radio" name="ysex" value="woman"> 女 
</td> 
</t> 
<tr> 
<td align="right" bgcolor="#99ccff" nowrap> 職種 ・ </td> 
<td bgcolor="#ffffff"> 
<select name="occupation">- p.184 
<option selected> マ 選 択 し こく だ さい </option> 
<option value="student"> 学生 </option> | マ 押 LC(A い 症 
<option values"employee"> 会 社員 </option> 民 
<option value="selfemployee"> 自営 業 </option> 前 、 | 
<option value="housewife"> 専業 主婦 </option> ! 
<option value="other"> その 他 </option> 
</select> 
</td> 
</tr> 
<tr> 
<td align="nght" valign="top" bgcolor="#99ccff" nowrap> 住所 </td> 
<td bgcolor="#ffffff"> 
<font size="2"> 〒 </font> 


<input type="text" name="zip01" size="5" maxlength="3"> - 
<input type="text" name="zip02" size="6" maxlength="4"><br> 
<font size="2"> 都 道 府 県 </font><input type="text" name="yadd01" size="25"><br> 
<font sizes"2"> 市 区 町 村 </font><input type="text" name="yadd02" size="25"><br> 
<input type="text" name="yadd03" size="25"> 
</td> 
</tr> 
<tr> 
<td align="rnight" bgcolor="#99ccff" nowrap> 電話 番号 ・ </td> 
<td bgcolor=" ffffff"><input type="text" name="ytel" size="20" maxlength="10"></td> 
</tre 
</table> 
<!-- フ ォ ー ム 内 の テー ブル ここ まで > 
</td></tr> 
<tr><td> </td></tr> 
<tr> <td><hr size="1"></td></tr> 
<tr><td align="center"> 
<input type="submit" value=" 送 信 "> p.166 
<input type="reset" value=" リ セッ ト "> .168 
</td></tr> 
</table> 
<!-- フ ォ ー ム 部 分 の レイ アウ ト テ ー ブ ゴブ ル こ こま で ++++ ネ キキ キャ キキ キキ キキ キキ キキ キキ キキ キキ キキ キキ キキ キ す キキ キキ キキ オー 
</form> 








</center> 
</body> 


</html> 
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ブル を 利用 し た ベー 


テー ブル で レイ アウ ト し た ペー ジ で す 。 テ ー ブ ル だ け を 利用 し て も 、 驚 く ほ ど 凝 っ た ペー ジ が 
作成 可能 で す 。 た だ し 、 HTML4.01 本 来 の 使用 方 法 と は 異な り ま す の で 、 使用 に は 注意 が 必要 で す 。 
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Title 』 Web デ ザイ ン の 行方 
SpPeakerW 〇 山木 <W 式 合せ OO アー トディ レク ター) 


同 Web に 求め られ て いる 広告 の あり 方 を 
も う 一 度 考 え 直 し て み ま せ ん か ? 
他 の 広告 媒体 < テ し じゃ 間 . 新 李 な の と 比 | 
罰 や 参照 を し な が ら 、 Web が 今後 進む べき 
方 合 を 、 も う 一 度 考 宗 * 検 語 し て いき ます 。 


Ceeyrei c) 2000 Cemouter Creehe Conference sirentremred 
ーーーーーーーーーーーーーーーーー ーー 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona り /EN"> .18 


<head> 

<title>Computer Graphic Conference : スケ ジュ ー ル </title> 

<meta http-equiv="content-type" content="text/htmL charset=shift_jis"> 
</head> 


<body bgcolor="white" text="#333333" marginheight="0" topmargins"0" link="#333333" 
Vlink="#6699cc" aink="#00ccff"> 


<center> 





<!--⑯ レイ アウ ト テ ー ブ ル ここ か ら --> 
<table width="640" border="0" cellspacing="0" cellpadding="0"> 
<tr> <td> 
<!-- 人 る レイ アウ ト テ ー ブ ル ここ か ら ー> 
<table border="0" cellspacing="0" cellpadding="0"> 
<tr><td align="right" colspan="2"> 
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<imq src="image/titlelogo.gif" width="640" height="90" at="Computer Graphic Conference"> 
</td></tr> 
<tr> 
<td background="image/ita01.gif"><img src="1mage/1pix.gif" width="1" height="20"></td> 
<td align="rght" valign="bottom" background="image/ita01.gif"> 
<!-- 価 レイ アウ ト テ ー ブ ル ここ か ら ー> 
<table width="440" border="0" cellspacing="1" cellpadding="1" bgcolor="#999999"> 
<tr> 
<td align="center" bgcolor="#eeeeee" height="10"> 
<font size="2"><a href="topics.htmU"> トピ ックス </a></font> 
</td> 
<td align="center" bgcolor="#eeeeee" height="10"> 
<font size="2"><a href="contents.html"> 活動 内 容 </a></font> 
</td> 
<td align="center" bgcolor="#eeeeee" height="10"> 
<font size="2"> スケ ジュ ー ル </font> 
</td> 
<td align="center" bgcolor="#eeeeee" height="10"> 
<font size="2"><a href="speaker.html"> 講師 </a></font> 
</td> 
<td align="center" bgcolor="#eeeeee" height="10"> 
<font size="2"><a href="index.html"> 会 員 登録 </a></font> 
</td> 
<td align="center" bgcolor="#eeeeee" height="10"> 
<font size="2"><a href="index.html">CGC 概 要 </a></font> 
</td> 
</tr> 
</table> 
<!-- 価 レイ アウ ト テ ー ブ ル ここ まで …> 
</td> 
</tr> 
<tr> 
<td aiign="right" colspan="2"> 
<a href="login.html"><font sizes"2" color="ff6600"> 会 員 LOG IN</font></a> 
</td></tr> 
</table> 
<!-- 人 ぐ レイ アウ ト テ ー ブ ル ここ まで --> 
</td></tr> 
<tr><td> </td></t> 
<tr><td align="center"> 
<!-- 人 @ レイ アウ ト テ ー ブ ル ここ か ら ー> 
<table widths="500" border="0" cellspacing="2" cellpadding="1"> 
<tr><td><img src= "image/title.gif" width="500" height="70" alt=" ス ケ ジ ュ ー ル "></td></tr> 
<tr><td align="right"> 
<img src="1image/month.gif" width="344" height="16" usemap= "month" borders"0" alt=" 月 ">| 一 p.142 
</td></tr> 
<tr><td> </td></tr> 
<tr><td height="23"> 
<img src="image/h_march.gif" width="22" height="20" alt="3 月 "> 
</td></tr> 
<tr><td align="center"> 
<!-- 信 上 部 の テー ブル ここ か ら ー> 
<table border="0" width="450" cellspacing="1" cellpadding="1" bgcolor="#999999"> 
<t『> 
<td bgcolor="white" height="2"> </td> 
<th bgcolor="#666666" height="2"><font size="2" color="white"> 市 区 町 村 </font></th> 
<th bgcolor="#666666" height="2"><font size="2" color="white"> 開催 日 </font></th> 
<th bgcolor="#666666" height="2"><font size="2" color="white"> 曜日 </font></th> 
<th bgcolor="#666666" height="2"><font size="2" color="white"> 開始 </font></th> 
<th bgcolor="#666666" height="2"><font size="2" color="white"> 終了 </font></th> 
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<th bgcolor="#666666" height="2"><font size="2" color="white"> 会 場 名 </font></th> 
</tr> 
<tr> 
<td background="image/t1_1.gif"><b><font size="2" color="white">01</font></b></td> 
<td bgcolor="#99ccff"><font size="2"> 渋谷 区 </font></td> 
<td bgcolor="#6699ff" align="right"><font size="2">3 月 1 日 </font></td> 
<td bgcolor="#99ccff" align="center"><font size="2"> ( 金 ) </font></td> 
<td bgcolor="#6699ff" aliqn="center"><font size="2">10:00</font></td> 
<td bgcolor="#99ccff" align="center"><font size="2">15:00</font></td> 
<td bgcolor="#6699ff"><font size="2"> 〇 〇 〇 セン ター </font> </td> 一 ーーーーーーーーーp.228 
</tr> 
<tr> 
<td background="image/t1_2.gif"><b><font size="2" color="white">02</font></b></td> 
<td bgcolor="#dddddd"><font size="2"> 渋谷 区 </font></td> 
<td bgcolor="#bbbbbb" align="right"><font size="2">3 月 8 日 </font></td> 
<td bgcolor="#dddddd" align="center"><font size="2"> ( 金 ) </font></td> 
<td bgcolor="#bbbbbb" align="center"><font size="2">10:00</font></td> 
<td bgcolor="#dddddd" align="center"><font size="2">15:00</font></td> 
<td bgcolor="#bbbbbb"><font size="2"> へ ヘム セン ター </font></td> 
</tr> 
<tr> 
<td background="image/t1_1.gif"><b><font size="2" color="white">03</font></b></td> 
<td bgcolor="#99ccff"><font size="2"> 新宿 区 </font></td> 
<td bgcolor="#6699ff" align="right"><font size="2">3 月 9 日 </font></td> 
<td bgcolor="#99ccff" align="center"><font size="2"> ( 土 ) </font></td> 
<td colspan="2" bgcolor="#ccccff" align="center"><font size="2"> 未定 </font></td> 
<td bgcolor="#6699ff"><font size="2">「 ビル 4F</font></td> 
</tr> 
<tr> 
<td rowspan="2" background="image/t1_2.gif" valign="middle"><b><font size="2" 
color="white">04</font></b></td> 
<td bgcolor="#dddddd" rowspan="2" valign="middle"><font size="2"> 目黒 区 </font></td> 
<td bgcolor="#bbbbbb" aiign="right"><font size="2">3 月 16 日 </font></td> 
<td bgcolor="#dddddd" align="center"><font size="2"> ( 金 ) </font></td> 
<td bgcolor="#bbbbbb" align="center"><font size="2">10:00</font></td> 
<td bgcolor="#dddddd" align="center"><font size="2">12:00</font></td> 
<td rowspan="2" bgcolor="#bbbbbb"><font size="2"> へ へ ヘ へ セ ンタ ー </font> <br> 
<font size="2" color="#0066ff"> ※ 2 日間 に わけ て 開催 し ます 。</font></td> 
</tr> 
<tr> 
<td bgcolor="#bbbbbb" align="right"><font size="2">3 月 17 日 </font></td> 
<td bgcolor="#dddddd" aiign="center"><font size="2"> ( 土 ) </font></td> 
<td bgcolor="#bbbbbb" align="center"><font size="2">10:00</font></td> 
<td bgcolor="#dddddd" align="center"><font size="2">12:00</font></td> 
</tr> 
<tr> 
<td rowspan="2" backgqround="image/t1_1.gif" valign="middle"><b><font size="2" 
color="white">05</font></b></td> 
<td bgcolor="#99ccff" rowspan="2" valign="middle"><font size="2"> 新宿 区 </font> 
</td> 
<td bgcolor="#6699ff" align="right"><font size="2">3 月 24 日 </font></td> 
<td bgcolor="#99ccff" align="center"><font size="2"> ( 土 ) </font></td> 
<td colspan="3" rowspan="2" bgcolor="#ccccff" align="center"><font size="2"> 一 一 -p.236.237 
未定 </font></td> 
</tr> 『 
<tr> 
<td bgcolor="#6699ff" align="right"><font size="2">3 月 25 日 </font></td> 
<td bgcolor="#99ccff" align="center"><font size="2"> (日 ) </font></td> 
</tr> 
</table> 
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<!-- 信 上 部 の テー ブル ここ まで 一 > 
</td></tr> 
<tr> <td> </td></tr> 
<tr><td> 
<!-- 価 レイ アウ ト テ ー ブ ル ここ か ら ー> 
<table border="0" cellspacing="2" cellpadding="3" align="center"> 
<tr> 
<td align="right"><imq src="image/h_title.gif" width="55" height="13" alt="title"></td> 
<td>Web デザ イン の 行方 </td> 
</tr> 
<tr> 
<td><imd src= "image/h_speaker.gif" width="85" height="17" alt="speaker"></td> 
<td nowrap> 〇 山 〇 太 <font size="2"> (株 式 会 社 ) 〇 アー トディ レク ター) </font></td> 
</tr> 
</table> 
<!-- 偽 レイア ウト テー ブル ここ まで 一 > 
</td></tr> 
<tr><td> </td></tr> 
<tr><td align="center"> 
<!-- 価 レイ アウ ト テ ー ブ ル ここ か ら ー> 
<table width="450" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
<td colspan="2" rowspan="2"><img src="image/t2_1.gif" width="10" height="10"></td> 
<td background="1mage/t2.qif"><img src="image/1pix.gif" width="430" height="1"></td> 
<td colspan="2" rowspan="2"><imq src="image/t2_2.gif" width="10" height="10"></td> 
</tr> 
<tr> 
<td><img src= "image/1pix.gif" width="1" height="9"></td> 
</tr> 
<tr> 
<td background= "image/t2.gif"><img src="1mage/1pix.gif" width="1" height="1"></td> 
<td><img src="1mage/1pix.gif" width="9" height="1"></td> 
<td align="center"> 
<!-- 人 @ レイ アウ ト テ ー ブ ル ここ か ら …> 
<table width="400" border="0" cellspacing="2" cellpadding="2"> 
<tr> 
<td rowspan="3" width="40%"><img src= "image/photo01.jpg" 
width="137" height="144" alt="photo"></td> 
<td width="60%" nowrap><b><font color="#666666"> Web に 求め られ て いる 
広告 の あり 方 を <br> も う 一 度 考え 直し て み ま せ ん か ? </font></b></td> 
</tr> 
<tr> 
<td> 他 の 広告 媒体 <font sizes"2"> (テレ ビ や 雑誌 、 新 聞 な ど ) </font> と 比較 や 
参照 を し な が ら 、Web が 今後 進む べき 方 向 た を 、 も う 一 度 考察 ・ 検 証し て いき ます 。</td> 
</tr> 
<tr> 
<td atign="right"> 
<!-- 倫 レイ アウ ト テ ー ブ ル ここ か ら --> 
<table width="80" border="0" cellspacing="0" cellpadding="2" bgcolor="qray"> 
<tr><td align="center"> 
<a href="detaiLhtnl"><font size="2" color="white"> 詳細 を 見 る </font></a> 
</td></tr> 
</table> 
<!- 鍛 レイ アウ ト テ ー ブ ル ここ まで --> 
</td> 
</tr> 
</table> 
<!-- 倫 レイア ウト テ ー ブ ル ここ まで 一 > 
</td> 
<td><img src="image/1pix.qif" width="9" height="1"></td> 
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</td></tr> 
<tr> <td> </td></tr> 
<tr><td align="center"> 





<td background="image/t2.gif"><img src="image/1pix.gif" width="1" height="1"></td> 
</tr> 
<tr> 
<td colspan="2" rowspan="2"><img src="image/t2_3.gif" width="10" height="10"></td> 
<td><img src="image/1pix.qif" width="1" height="9"></td> 
<td colspan="2" rowspan="2"><img src="1mage/t2_4.gif" width="10" height="10"></td> 
</tr> 
<tr> 
<td background="image/t2.qif"><img src="image/1pix.gif" width="430" height="1"></td> 
</tr> 
</table> 
<!- 倫 レイ アウ ト テ ー ブ ル ここ まで > 
</td></tr> 
</table> 
<!-- 倫 レイア ウト テ ー ブ ル ここ まで 一 > 








<!-- 人 下部 の テー ブル ここ か ら --> 
<table width="450" border="1" cellspacing="0" cellpadding="1"> 
<thead style="backqround-image:url('image/t3_1.gif):"= p238 
<tr> 
<th> </th> 
<th><font size="2">10:00 一 12:00</font></th> 
<th><font size="2">12:00 一 13:00</font></th> 
<th><font size="2">13:00 一 15:00</font></th> 
</tr> 
</thead> 
=tfoot style="background-image:url('image/t3_3.gif):"> 
<tr> 
<td align="center"> </td> 
<td colspan="3"><font sizes"2"> 当日 多少 の 時 間 及 び 内 容 の 変更 が ある か も 知れ ませ ん 。 
ご 了承 願い ます 。</font> </td> 
</t> 
</tfoot> 
<tbody style="background-image:url('image/t3_2.qif)2"> 
<tr> 
<td align="center" nowrap valiign="middle"><b><font size="2">01.02.03</font></b></td> 
<td align="center" vaign="top"><font size="2"> 他 の 広告 媒体 と の 比較 <br> 
Web の 特性 を 探る </font></td> 
<td align="center" valign="middle"><font size="2"> 休憩 </font></td> 
<td vaiign="top" align="center"><font size="2">Web の 未来 <br> 広告 の 責任 </font></td> 
</tr> 
<tr> 
<td align="center" nowrap valign="middle"><b><font size="2">04 (1 日 目 ) </font></b></td> 
<td valign="top" align="center"><font size="2"> 他 の 広告 媒体 と の 比較 <br> 
Web の 特性 を 探る </font></td> 
<td align="center" valign="middle"><font size="2"> な し </font></td> 
<td align="center" valign="middle"><font size="2"> な し </font></td> 
</tr> 
<tr> 
<td align="center" valign="middle"><b><font size="2">04 (2 日 目 ) </font></b></td> 
<td vaign="top" align="center"><font size="2">Web の 未来 <br> 広告 の 責任 </font></td> 
<td align="center" valign="middle"><font size="2"> な し </font></td> 
<td align="center" valign="middle"><font size="2"> な し </font></td> 
</tr> 
<tr> 
<td aiign="center" vaign="middle"><b><font size="2">05 (1 日 目 ) </font></b></td> 
<td colspan="3" rowspan="2" vaiign="middle" align="center"> 
<font size="2"> 未定 </font></td> 











ビジ ュ ア ルイ ン デ ックス 


te 
<te 


<td align="center" valign="middle"><b><font size="2">05 (2 日 目 ) </font></b></td> 


</tr> 
</tbody> 
</table> 


<!-- 人 @ 下部 の テー ブル ここ まで --> 


</td></tr> 
<tr> <td> <br></td></tr> 
<tr><td align="center"> 


<!-- 信 レイ アウ ト テ ー ブ ル ここ か ら ー> 
<=table frame="hsides” border="5" cellspacing="1" cellpadding="1" width="400"> 
<tr><td nowrap align="center"> 
<font sizes"2">Copyright (Cc) 2000 Computer Graphic Conference all right reserved</font> 


</td></tr> 
</table> 


<!-- 信 レイ アウ ト テ ー ブ ル ここ まで > 


</td></tr> 
</table> 


<!-- 人 ぐ レイ アウ ト テ ー ブ ル ここ まで > 


</center> 


<map name="month"> 


<area shape="rect" coords="0.0,20,16" href="january.html" alts"1 月 "> 

<area shape="rect" coords="25,0,45,16" href="february.html" alt="2 月 "> 
<area shape="rect" coords="83,0,103,16" href="apriLhtml" alt="4 月 "> 

<area shape="rect" coords="110.0,130,16" href="may.html" alt="5 月 "> 

<area shape="rect" coords="137,0,157,16" href="june.html" alt="6 月 "> 

<area shape="rect" coords="167,0,187,16" href="july.htmU" alt="7 月 "> 

<area shape="rect" coords="195,0,215,16" href="august.html" alt="8 月 "> 
<area shape="rect" coords="222,0,242,16" href="september.html" alt="9 月 "> 
<area shape="rect" coords="250,0,275,16" href="october.html" alt="10 月 "> 
<area shape="rect" coords="285,0,.310,16" href="november.html" alt="11 月 "> 
<area shape="rect" coords="320,.0,344,16" href="decemmber.htmU" alt="12 月 "> 


</map> 
</body> 


</htm> 





テー ブル の 構成 図 (イメ ー ジ ) 
テー ブル 人 @ 
チー ジル ‥ ニ ーーー 
テー ブル 例 
テー ブル 信 
デー ブル 参 ニニ ーー 














テー ブル @、⑯、⑯、⑩、⑥、⑬ は 省 
略し ます 































Titie rei デザ イン の 行方 
Speaker』 OO 大 eeoO ァ ー ト テク 












































に APPENDIX 





推奨 し な い 要素 ・ 属 性 (deprecated) と 文書 型 宣言 (DTD、p16 参照 ) が ひと めで わか る 一 
覧 表 で す 。 各 要 素 (タグ ) と 属性 の 詳細 は 、 本 文 を 参照 し こく だ さい 。 





a お ニー ニー ニー ニニ ピー シル こさ 人 
JNI 。  。。、 リ ジ ク 先 の URE 沖 指定 mh 9 
_mailto リン ク を 利用 し て メー ル を 送信 " 規格 外 
-name _ リンク 先 の 任意 の 名 前 2 
0 aget _。 内容 を 腕 み 込む ウィ ンド ウ を 指定 TL... 
abbr の は 
oe Hitle _ 省略 し な い 状態 D の テキ スト SM 
CDO 人 
に と トー title 省略 し な い 状態 の テキ スト SM. 
OS の BE に 
| T deprecated 
area クラ イア ント サイ ドイ メー ジマ ッ プ の S 
導き c PPP 
人 2 
_href _ __ リンク 先 の URL を 指定 _ お 
_-coords リン ク 領域 の 座標 を 指定 に 
に Shape _ リン ク 領域 の 形状 を 指定 S_ .… 
2 oe を 
base DU 人 
-href _ 基準 の 絶対 URL_M_M_M . 1 
target リン ク 先 の ペー ジ を 表示 する デフ ォ ル ト の 還 


ウィ ンド ウ や フレ ー ム 





DTD 一 一 S=Strict、T=Transitional、F=Frameset 
備考 一 deprecated= 推奨 し な い タ グ ・ 属 性 、 規 格 外 =HTML4.01 規格 外 


blockquote 長い 引用 S 





center セン タリ ング (div atign="center" と 同じ ) T deprecated 





ColgrouD _ テー ブル の 縦列 の グル ー プ 化 年 
align グル ー プ 内 の デー タ の 行 揃え S 
ーー 22 た = 
span 2 ウル 16 ずる 別 了 (ーーー は た ss 
valiqn グル ー プ 内 の デー タ の 縦 位置 に 


ER 





dd 定義 型 リ スト の 用 語 の 説明 


の 
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DTD 一 一 S=Strict、T=Transitional、F=Frameset 
備考 deprecated= 推 奨 し な い タ グ ・ 属 性 、 規 格 外 =HTML4.01 規格 外 


hn 見 出し (ns1-6) S 





type="checkbox" チェ ッ ク ボ ックス 


の 
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非 表 示 デ ー タ 


画像 を 使っ た 送信 ボタ ン 


の 










の 


の | の 


入力 フィ ー ル ド の 初期 値 、 送 信 さ れる 
文字 、 ラ ベル テキ スト な ど 


1ns 0 に 結っ 
-cHte _ 追加 理由 を 記述 し た 文書 の URL _ ee 
ee し 
08INGK ニー 1 1 行 の 入力 フィ ー ル ド (検索 用 ) T deprecated 
ac -prompt 。 入力 フィ ー ル ド の ラベ ル .  ..T  . deprecated. 
_kbd _ _ _ 、  . キー ボー ド な どか ら 入 力 され る 文字 _____ . EE 
MD6U SA の MO ペル SS こま 
legend fieldset で グル ー プ 化し た 項目 の タイ トル  . に 0 
cs aiign _ 位置 (top、bottom、left、rght)  T deprecated 
i AN だ 
type マー ク の 種類 (disc、circle、square)、 由 deprecated 
二井 
に Value リス ト の 開始 番号 。  T deprecated. 
人 ここ 
map スー ジコ De 
ニコ ルー] 
marduee ーー 規格 外 
_behavior _ マー キー の 動き 方 (screll、altemate、slide) 2: 規格 外 
コビー ク ) 。 ) 、1 二 規格 外 
cm =! 規格 外 
SDACB tp ね の 全日 規格 外 
_-Ioopp _ スクロール す る 回 数 (回 数 、0、-1) 3】 規格 外 
-scrollamount 再 描画 まで の 距離 WW 規格 外 
-scrolldelay 再 描画 まで の 時 間 1 規格 外 
truespeed scrolldelay 属性 で 60 より 小さ い 値 を 指定 規格 外 
ss 人 し た 場合 に 実際 に その 間隔 で スク ロー ル さ せる 
WSDADGT SEE の OEIROOR 規格 外 
width マー キー の 幅 規格 外 





DTD 一 一 S=Strict、T=Transitional、F=FI 


F=Frameset 
備考 一 deprecated= 推 奨 し を い タ グ ・ 属 性 、 規 格 外 =HTML4.01 規格 外 








DTD 一 一 S=Strict、T=Transitional、F=Frameset 
備考 一 deprecated= 推奨 し な い タグ ・ 属 性 、 規 格 外 =HTML4.01 規格 外 


テー ブル の ヘッ ダ 
HTML 文書 の タイ トル 
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NTT ドコ モ が 規定 し て いる i モ ー ド 専用 ペー ジ 記 述 言語 「i モ ー ド 対応 HTML」 の 一 覧 で す 。 
特に 新しい バー ジョ ン の HTML タグ や 属性 は 、 機 種 に よっ て 未 対応 の 場合 も わり ます 。 各 タ グ や 
要素 の 意味 や 働き は 基本 的 に HTML タグ と 同じ と な り ま す の で 、 詳細 は 本 文 を 参照 し て くだ さい 。 


リン ク を 作成 





ダイ レク トキ ー 機 能 


代替 テキ スト 
あら か じ め 選 択 され た 





Value 入力 フィ ー ル ド の 初期 値 、 送 信 され る 文字 、 1.0 p.166 
ラベ ル テ キ スト な ど 











marquee 
behavior 動作 方 法 (scroll、slide、altemate) 2.0 p.71 
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name 入力 フィ ー ル ド の 名 前 1.0 p.176 
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1 モー ド に は モード 専用 の 絵文字 が 用 意 さ れ て いま す 。 

絵文字 を 表示 させ る に は 、「@#10 進 コ ー ド :」 と 記述 し ます (「:」 は 必須 )。 た と えば 、「 晴 れ ]」 
の 絵文字 を 使用 し た い 場 合 は ソー ス に 「&#63647:」 と 記述 し ます 。 

1 モー ド 用 Web ペー ジ を PC で 表示 させ る と 、 絵 文字 は 「・」 で 表示 され ます 。 


近 
き 
ふ 
さ 
運 
さき 
4 
に 
き 
き 





還 
に 
の 
に 
9 
ゆ 
氏 
LM 
ご 


万 





せ 63877 


シャ ー プ ダイ ヤル 









63892 ハー ト た ち (人 複数 ハー ト ) 


わーい (嬉し い 顔 ) 


EE 63904 。 ひら めき 
- 63905 。 お か っ (怒り ) 


63911 exclamation 


63912 exclamation&question 





っ 。 63915 あせ あせ (飛び 散る 汗 ) 
- ひ 。 63946 。 た 5- っ G⑮ 
3 63917 。 タッ シュ (DHl9e ま ) 
63918 一條 記 D 
て 63919 一 人 半 2 
 。 ss824。 の テコ つ 
8 63825 。 < る の 


品 63829 。 (人 虹 ) 

計 。 es830 ⑦2 
因 。 ss ⑱ 
萬 。 ss835 。 Gooo 。 
和合 ss836 oy 
晶 。 ssm37 eo 
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タグ か ら そ の 属性 と 解説 ペー ジ を 検索 する イン デック ス で す 。 















DOCTYPE. 





& キ ー ワ ー ド 5: 
る 番号 
加 Dcz Rio5zsrras 
acceSSkey. 
emall .… 
href …146,148.152,.156,262.307,315 
href="mailto:" .… 
href="mailto: 衣 
href="tel: 護 " 
DDSraisno 
acronym .… .58 
58 
addresS . -.25 
applet . 
331 
軸 較 yanasss 142 


Coords . 142 
href .… 142 
shape .… …142 
b 106.109 


bdo … 












alink .… 
background . 
bgcolor . 
bgproperti 
bottommargin.. 
leftmargin . 
as 
rightmargin .… 
text 
topmargin . 


center 
Cite 


Valign . 
width . 





hr 

























align . 
color . 
noshade .. 
.63 Size .… 
.63 width. 










cite 
datetime .. 


iframe 





align 
frameborder 
height .…… 
marginheight.… 
marginwidth 





autostart .… 
height.…. 
repeat .… 


fieldset. 
font… 
…:140 
126,128,130, 
132.134,136.140,142 
US erraraosierdksrensepdeed 
VSPace . 


width 





enctype input 
method .… せ ……… 
method="post" 



















frame IP 1 
bordercolor. .166.170.174.178,180,182 
frameborder 174 
marginheight.… 5 …170 
marginwidth type="checkbox" 
name.… type="hidden" 
noreSize .. type="image"' . 

人 SCO 人 cardhsesassesdisssnsssgessas type="pasSword" 
type="radio" 
frameset type="reset" 
type="submit" 


type="text'" .… 
value ……166.168,.174.178,180,182 
60 





frameborder .… 






framespacind . 






datetime .… 


Sries の 3RidKdRt2KGEreiuyed 56 
absedseeoksaaessese 194 
1 194 
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alternate . 
behavior . 
bgcolor .… 
direction . 
height . 
hspace 
loop 
scroll 


scrollamount.. 


scrolldelay 
slide 
truespeed 


vspace .… 


逢 IO rieopeeoy 


noembed .… 
noframe: 
noscript .… 


optgroup 


option 


HTML タグ イン デック ス 
































language 
に 


small . 
SPan . 
strike . 
strong 


style.… 


background 
bgcolor .… 
border .… 
bordercolor 
bordercolordark .. 
bordercolorlight .. 
cellpadding 
cellspacind 
frame …… 

height . 
hspace 
rules .… 
VSpace 
width.… 














人 


















valign 


background . 
bgcolor .… 
height … 
nowraDP .… 
rowsPan 
valign 
width 
textarea 


background 
bgcolor . 
colspan. 
height 
nowraP . 
rowspan 


thead .… 


valign 
title .… 
as 


background 
bgcolor .… 
valign 


HTML タグ イン デック ス 411 
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4 リル ( 









属性 か ら タ グ と 解説 ペー ジ を 検索 する 逆 引 キイ ン デ ックス で す 。 


acceSskey 

ョ ーー …… 
form 一 
caption -。 .… 
Col ……… 
colgrouP -- 
div 一 
h 一 . 
hr 一 

iframe 一 
img 一 … 
input 一 
legend 
Pe 
table -- 
tbody 
td … 
tfoot 一 
th … 
thead -- 

















action 
align 


alink body- .… 
alt area -- 
img 一 . 
Input .… 
alternate marquee -- 
autostart embed-- .… 











background 
body 一 . 76.78 
table - .… -230 
td 一 232 
mh 一 232 
一 … 232 
behavior marquee-- 71 
bgcolor body 一 .… 74 
marquee -- 72 
table  .… 228 
td 一 
th 一 
ans 


bgproperties="fixed" 
body - …- 
border frameset -- 
















imgー … 

table - .… 
bordercolor 

frame 一 .… ea 

frameset -- ・256 

table - .… 222 
bordercolordark 

asaararoeaoene 222 
bordercolorlight 

2 の 
bottommargin 

body - .… 
cellpadding 

し 219 
cellspacing 

table - 219 
checked input-。 . 180,182 
cite blockquote -- 48 












63 
61 
….51 
(233ES2SKerettSGesstdi2eiossssgfvpaail 6 
clear 138.205 
code applet -_ 282.331 
color font 一 . 82 
hm … 94 
cols frameset -_ 
textarea -- .176 
colspan 。 h 一 .237 
compact dl .124 
content meta--.… 
Coords area 一 … 
data object 
datetime 







del 


direction 








































emall 8 … 
enctype form-.… 
face font 一 … 
for label  . 
frame table  . 
frameborder 
10 sarAEootsssesvassdeee 250 
frameset -- 
iframe 一 .… 
framespacing 
借 BITI6S 人 aasarsyesssssswsensrt 251 
height applet - . 
embed 
iframe 
img 一 … 
marduee -- 
table  . 
td . 
th 一 . 
href="malilto:" 
href="malilto: 
a… … 
href="tel: 雄 " 
8 careneeifyebe2e9RH8DNDU32DESBHeioed 315 
href ョ ー …146.148,152,156.262.307.315 
area -_ 8 
base - . 22 
Ink 一 
hspace img 一 … 
marquee -- 
table  … 
http-equiv 
02rsseseaset 28.30.32 











QBKOIOUD easedessseisozsseans 190 

option 190 
language 

に 274.328 
leftmargin 
link 





loop bgsound 


marduee -。.… 


marginheight 
frame - … 
iframe 一 .… 
marginwidth 
frame 一 .… 
iframe 一 .… 

maxlength 
input 一 . 
form 一. 
select -_ 


method 
multiple 


name ーー 
applet -- 
button 一 
frame 
iframe 
Input - 
map 一 … 
meta 一 … 
param 一. 
select -.… 
textarea -- 
frame 一 .… 
hr 一 . 
td 一 . 
th 一 . 

















noreSize 
noshade 
nowrap 













rel 
repeat 
rev 
rightmargin 
body 一 … 
TOWS frameset -_ 
textarea -- 
rowspan 1dー …/…… 
hー … 
rules table 
Scroll jaresroksskasrersrrn 71 
scrollamount 
marduee ee 
scrolldelay 
marquee -. 
scrolling frame--.… 
iframe 一 .… 
selected option 一 . 
Shape area -- 
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size ね BSBfOME 102 
font 一 
hr 一 . 





























Input 
select -- 
slide marquee -- 
span col .… 
colgrouD -- ..240 
SrC bgsound 278.307 
embed -- 79,280.307 
frame - .…250.252.256.258,260,262 
frameset -_ -247 
iframe  .… -268 
im て 126,128.130., 
132.134.136.140.142 
input -- 
Script -- 
start ol … 
5 誠 sdaaavrarsseneeteyeon 
target ョ ーー … 









base 













telbpook  a 一 … 
text 
title . 
abbr 
acronym 一 - 
topmargin 
Ds 96 
truespeed 
marduee -. 
type Input …… .182,178.170, 


174.180.168.166.174 
style - .… 
button ー 
ーー… 
Object -- 
gl … 
Script 
… 


MSeNIBD: | IIIraesresreasrassastdsesassssss 1 人 4 の 


valign GO 
ColgrouD -- 
tbody 
td . 
tfoot 
thー …… 
thead -- 
らら 














414 。HTML 属 性 イン デック ス 


value 


vlink 
VSDace 


Wrap 


Nsssesseydeosed 172 
input -- 66.168.174.178.180,182 
lo .。 
option -- 
Param -- 
body 
img 一 … 
marquee 
table - .……… 










applet -- 
col- .… 
colgrouPp -- 
embed - .… 
hr 一 . 
iframe 
img- . 
marquee 
table -- 
td 一 
th . 
textarea -。 . 















| 0 4 中 ( 





各種 の 用 語 か ら 検索 する イン デック ス で す 。 


! (シン グル クォーテーション ) 
『 (ダブル クォーテーション ) 
左 (シャ ー ブ ) +:。 
rrggbb .… 
% (パー セン ト ) 
(アス タリ スク ) . 
22 
ー (ハイ フン ) . 
. (ピリ オド ) .… 
.aif 
-au 
-aVI. 
-dcr .… 
-dir… 
-dxr .… 
.htacceSS. 























.WaV . 
/ (スラ ッシュ ) . 
/--> … 
<!- 


se 








16 進数 対応 表 . 
1 行 の テキ スト 入力 フィ ー ル ド . 
256 色 .… 














2 進数 340 
3 原色 340 
87a …… 

es 

8 ビッ トカ ラー ..286.287.342 





acceSSibility 
ADF ファ イル 





















Cascading Style Sheets Level1 
CD-ROM コン テン ツ 
CGI 
CGI スク リプ ト 











colorname .… 74.75.340,344 
Common Gateway Interface .334 
CompactHTML … せ ………. .314 
CPU.… -335 
CSS1. -317 
CSS2 . -317 
CSS3 .… -317 
C 言 語 .… -334 
deprecated.. 。2.5 
Director … -304 
Director Lite. 





Document Object Model . 
Document Type Definition 
DOM 
DOM1 .… 
Dreamweaver . 


Dynamic HTML .… 








e-mail アド レス .… し 

eXtensible Hyper Text Markup Language .…2.310 

Fireworks.………… -298 

ee -304 
Flash Player 

Freehand 

FTP ソ フト 





Graphics Interchange Format . 


用 語 イ ン デ ックス 415 


416 





HTML4.01 . 





HTML4.01 規格 外 . 
HTML エディ タ .… 
HTML ファ イル .… 











Hyper Text Markup Language 













IO 
import . 
I に to 間 
ISO 8859-1 .… 
ISO 8601 形式 …:61 
315,315 
-.12.286.316.334.335 


1i モ ー ド 対応 HTML. 
i モ ー ド 用 Java 
i モ ー ド 用 Web ペ ー ジ .… 













WeseeseSedvarssea 
JavaVM … せ ぼ ……… 
Java ア プレ ッ ト . 282.299,330.331 
Java 仮想 マシ ン 330 
Java バー チャ ル マ シ ン . -.330 
Java 非 搭載 機種 用 .… ..315 
JavaScript .………… 299.326.330 





JavaScript1.5. -:333 
Joint Photographic Experts Group -284 
JPEG .… -12.284.286.287.289,304.315 
Jscript . 














LiveMotion 






LiveScript .… .326 
Macromedia 社 


Microsoft 社 


MPEG-1 Audio Layer3.. 
MPEG-4 .… 











MPEG-7 .… 
Multi-image Network Graphics 
Netscape 社 . 6 
1 人 314.316 
Paint Shop Pro .289,.290.295.296.297 


ao 
Perl .… 
PIGT 。 
PNG .… 
Portable Network Graphic: 
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